import OidcCallbackUri from '@/mdx-components/OidcCallbackUri';
import Step from '@/mdx-components/Step';

import createApplication from './assets/create_application.webp';
import applicationSettings from './assets/application_settings.webp';
import clientCredentials from './assets/client_credentials.webp';
import assignUsers from './assets/assign_users.webp';

<Step index={0} title="Create an OIDC application on Okta admin portal">

- Visit the Okta admin portal and sign in as an administrator.
- Navigate to the `Applications`/`Applications` page using the side menu.
- Click the `Create App Integration` button to create a new OIDC application.
- Select the `OIDC - OpenID Connect` option as the `Sign-in method`.
- Select the `Web Application` option as the `Application type`.

<center>
  <img src={createApplication} alt="create application" />
</center>

Click the `Next` button to continue.

</Step>

<Step index={1} title="Configure the application settings">

1. Provide a `App integration name`. It will be used as the identifier of your OIDC application.

2. Add a new `Sign-in redirect URIs` using the Logto SSO connector's callback URL.

<OidcCallbackUri />

This is the URI that the Okta will redirect the user's browser after successful authentication. After a user successfully authenticates with the IdP, the IdP redirects the user's browser back to this designated URI along with an authorization code. Logto will complete the authentication process based on authorization code received from this URI.

<center>
  <img src={applicationSettings} alt="application settings" />
</center>

3. Assign users to the application.

Based on the `Assignments` settings, you can choose to assign the application to all users or specific users/groups.

<center>
  <img src={assignUsers} alt="assign users" />
</center>

Click the `Save` button to save the application settings.

</Step>

<Step index={2} title="Set up Logto connector with the client credentials">

After successfully creating the OIDC application, you will be redirected to the application details page.

<center>
  <img src={clientCredentials} alt="client credentials" />
</center>

Copy the `client ID` and `client secret` and fill in the corresponding fields on the Logto SSO connector `connection` tab.

Use your Okta domain as the `issuer`. Example: `https://dev-12345678.okta.com`. Once you have filled in all the fields, click the `Save` button to save the connector settings.

If the `issuer` link you provided is valid, you will see a parsed full list of Okta IdP configurations shown below the `issuer` field.

</Step>

<Step index={4} title="Additional Scopes (Optional)">

Use the `Scope` field to add additional scopes to your OAuth request. This will allow you to request for more information from the Okta OAuth server. Please refer to the [Okta documentation](https://developer.okta.com/docs/reference/api/oidc/#scopes) for more details about the available scopes.

\*Regardless of the custom scope settings, Logto will always send the `openid`, `profile` and `email` scopes to the IdP. This is to ensure that Logto can retrieve the user's identity information and email address properly.

</Step>

<Step index={5} title="Set email domains and enable the SSO connector">

Provide the email `domains` of your organization on the connector `experience` tab. This will enabled the SSO connector as an authentication method for those users.

Users with email addresses in the specified domains will be exclusively limited to use your SSO connector as their only authentication method.

</Step>

For more details about create OIDC integration with Okta, please check [Create OIDC App Integrations](https://help.okta.com/oie/en-us/content/topics/apps/apps_app_integration_wizard_oidc.htm).
