Guides

To test your authorization URL, enter the complete authorization URL in a browser. Do this in your browser's privacy or incognito mode to avoid false positive or negative results.

If everything is configured properly:

  • The user is redirected to the Identity Provider's sign-in page.
  • After successful authentication, the user is redirected to the redirect URI that you specified, along with an #id_token= fragment in the URL. The value of this parameter is your Okta OpenID Connect ID token.

If something is configured incorrectly, the authorization response contains error information to help you resolve the issue.

There are four primary ways to kick off the sign-in flow.

Create a link that the user clicks to sign in. The HREF for that link is the authorize URL that you created in the previous section:

<a href="https://${yourOktaDomain}/oauth2/v1/authorize?idp=0oaaq9pjc2ujmFZexample&client_id=GkGw4K49N4UEE1example&response_type=id_token&response_mode=fragment&scope=openid&redirect_uri=https%3A%2F%2FyourAppUrlHere.com%2F&state=WM6D&nonce=YsG76jo">Sign in with Identity Provider</a>

After the user clicks the link, they are prompted to sign in with the Identity Provider. After successful sign in, the user is returned to the specified redirect_uri along with an ID token in JWT format.

Okta Sign-in Widget

Okta also offers an easily embeddable JavaScript widget that reproduces the look and behavior of the standard Okta sign-in page. You can add a Sign in with {IdentityProviderName} button by adding the following code to your Okta Sign-in Widget configuration:

config.idps= [
        {type: 'IdentityProviderName', id: 'Your_IDP_ID_Here'}
        ]; 
	config.idpDisplay ="SECONDARY";

You can find out more about the Okta Sign-in Widget on GitHub. Implementing sign in with an Identity Provider uses the Widget's OpenID Connect authentication flow.

Custom Okta-hosted Sign-in Page

If you configured a Custom Okta-hosted Sign-in Page, you can add a Sign in with {IdentityProviderName} button by adding the following code beneath the var config = OktaUtil.getSignInWidgetConfig(); line:

config.idps= [
        {type: 'IdentityProviderName', id: 'Your_IDP_ID_Here'}
        ]; 
	config.idpDisplay ="SECONDARY";

AuthJS

If you don't want pre-built views, or need deeper levels of customization, then you can use the same AuthJS SDK that the Sign-in Widget is built with. For further information see the AuthJS GitHub repo. Implementing sign in with an Identity Provider uses the SDK's OpenID Connect authentication flow.

Next steps

Featured Guides