Skip to content

Sign-in page example update #6046

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thomascavanagh-okta merged 1 commit into from
Mar 17, 2026
Merged

Sign-in page example update #6046

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 16 additions & 7 deletions packages/@okta/vuepress-site/docs/guides/custom-widget/main/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -661,12 +661,12 @@ The Sign-In Widget for embedded authentication is app aware. This means that you

When the page renders, an object called `OktaUtil` exists on the page. By calling the `OktaUtil.getRequestContext()` method, scripts on the page can get details about the current request.

To access the app's client ID (which uniquely identifies the app), write a function to safely get the client ID from the request context:
To access the app's ID (which uniquely identifies the app), write a function to safely get the app ID from the request context:

```html
// Identity Engine
<script>
function getClientId() {
function getAppId() {
if (!OktaUtil) return undefined;

var requestContext = OktaUtil.getRequestContext();
Expand All @@ -678,35 +678,44 @@ To access the app's client ID (which uniquely identifies the app), write a funct

// Classic
<script>
function getClientId() {
function getAppId() {
if (!OktaUtil) return undefined;

var requestContext = OktaUtil.getRequestContext();

// OIDC Apps
if (requestContext && requestContext.target && requestContext.target.clientId) {
return requestContext.target.clientId;
}

// SAML Apps
if (requestContext && requestContext.authentication && requestContext.authentication.issuer.id){
return requestContext.authentication.issuer.id;
}
}
</script>
```

Using this method, you can inspect the client ID and update it. For example, if you have a CSS file on your server that's for a particular client's CSS:
> **Note:** For Classic Engine orgs, it's not possible to retrieve the app ID for Secure Web Authentication (SWA) or Bookmark apps from the `requestContext`.

Using this method, inspect the app ID and modify the widget configuration or appearance when users sign in to the target app. For example, if you have a CSS file on your server that's for a particular OpenID Connect client's CSS:

1. In the Admin Console, go to **Applications** > **Applications**.
2. Select the app integration that you need the client ID for.
3. On the **General** tab, copy the ID from the **Client ID** box in the **Client Credentials** section.

```html
<script>
var clientId = getClientId();
var appId = getAppId();

if (clientId === '00exampleclientid'){
if (appId === '00exampleclientid'){
// add application-specific CSS
var head = document.head;
var link = document.createElement('link');

link.type = 'text/css';
link.rel = 'stylesheet';
link.href = 'https://example.com/styles/' + clientId + '.css';
link.href = 'https://example.com/styles/' + appId + '.css';
head.appendChild(link);
}
</script>
Expand Down