In this article, we will go through the steps to quickly build the Okta enterprise SSO sign-in experience (user authentication) with WordPress plugin and Logto.

Prerequisites

• A running Logto instance. Check out the introduction page to get started.
• Basic knowledge of WordPress plugin.
• A usable Okta enterprise SSO account.

Create an application in Logto​

Logto is based on OpenID Connect (OIDC) authentication and OAuth 2.0 authorization. It supports federated identity management across multiple applications, commonly called Single Sign-On (SSO).

To create your Traditional web application, simply follow these steps:

1. Open the Logto Console. In the "Get started" section, click the "View all" link to open the application frameworks list. Alternatively, you can navigate to Logto Console > Applications, and click the "Create application" button.
2. In the opening modal, click the "Traditional web" section or filter all the available "Traditional web" frameworks using the quick filter checkboxes on the left. Click the "WordPress" framework card to start creating your application.
3. Enter the application name, e.g., "Bookstore," and click "Create application".

🎉 Ta-da! You just created your first application in Logto. You'll see a congrats page which includes a detailed integration guide. Follow the guide to see what the experience will be in your application.

Integrate WordPress with Logto​

Install the plugin​

Configure the plugin​

Now you should be able to see the Logto menu in your WordPress admin panel sidebar. Click Logto > Settings to configure the plugin.

The minimum configuration to get started for the plugin is:

• Logto endpoint: The endpoint of your Logto tenant.
• App ID: The app ID of your Logto application.
• App secret: One of the valid app secrets of your Logto application.

All values can be found on the application details page in Logto Console.

After filling in the values, click Save Changes (scroll down to the bottom of the page if you can't find the button).

Configure redirect URI​

The redirect URI is the URL to which Logto will redirect users after they have authenticated; and the post sign-out redirect URI is the URL to which Logto will redirect users after they have logged out.

Here's a non-normative sequence diagram to illustrate the sign-in flow:

Here's how the sign-out flow looks like in a non-normative sequence diagram:

To learn more about why redirect is needed, see Sign-in experience explained.

In our case, we need to configure both redirect URIs in your Logto Console. To find the redirect URI, go to the Logto > Settings page in your WordPress admin panel. You'll see the Redirect URI and Post sign-out redirect URI fields.

1. Copy the Redirect URI and Post sign-out redirect URI values and paste them into the Redirect URIs and Post sign-out redirect URIs fields in your Logto Console.
2. Click Save changes in Logto Console.

Checkpoint: Test your WordPress website​

Now you can test your Logto integration in your WordPress website:

1. Open an incognito browser window if needed.
2. Visit your WordPress website and click the Log in link if applicable; or directly visit the login page (e.g., https://example.com/wp-login.php).
3. The page should redirect you to the Logto sign-in page.
4. Complete the sign-in or sign-up process.
5. After successful authentication, you should be redirected back to your WordPress website and logged in automatically.
6. Click the Log out link to log out of your WordPress website.
7. You should be redirected to the Logto sign-out page, then back to your WordPress website.
8. You should be logged out of your WordPress website.

To learn more about the WordPress plugin settings, see WordPress quick start.

Add Okta enterprise SSO connector​

To simplify access management and gain enterprise-level safeguards for your big clients, connect with WordPress as a federated identity provider. The Logto enterprise SSO connector helps you establish this connection in minutes by allowing several parameter inputs.

To add an enterprise SSO connector, simply follow these steps:

1. Navigate to Logto console > Enterprise SSO.

2. Click "Add enterprise connector" button and choose your SSO provider type. Choose from prebuilt connectors for Microsoft Entra ID (Azure AD), Google Workspace, and Okta, or create a custom SSO connection using the standard OpenID Connect (OIDC) or SAML protocol.
3. Provide a unique name (e.g., SSO sign-in for Acme Company).

4. Configure the connection with your IdP in the "Connection" tab. Check the guides above for each connector types.

5. Customize the SSO experience and enterprise’s email domain in the "Experience" tab. Users sign in with the SSO-enabled email domain will be redirected to SSO authentication.

6. Save changes.

Set up OIDC application on Okta admin portal​

Step 1: 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.

Click the Next button to continue.

Step 2: Configure the application settings​

1. Provide an 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.

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 the authorization code received from this URI.

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.

Click the Save button to save the application settings.

Step 3: Set up Logto connector with the client credentials​

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

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 4: Additional scopes (Optional)​

Scopes define the permissions your app requests from users and control which data your app can access from their Okta accounts. Requesting additional Okta permissions requires configuration on both sides:

In Okta admin console:

1. Navigate to Applications > Applications and select your OIDC application.
2. Go to the Assignments tab to ensure your app has access to the required users and groups.
3. For custom scopes, navigate to Security > API > Authorization Servers and select your authorization server.
4. Add custom scopes if needed:
   • Click Scopes and then Add Scope
   • Define scope names like okta.users.read or okta.groups.read for accessing Okta APIs
   • Configure consent requirements for each scope

For a complete list of available scopes and their descriptions, please refer to the Okta OIDC documentation.

In Logto Okta connector:

1. Logto automatically includes openid, profile, and email scopes to retrieve basic user identity information. You can leave the Scopes field blank if you only need basic user information.
2. Add offline_access to the Scopes field if you plan to store tokens for persistent API access. This scope enables refresh tokens for long-lived API access.
3. Add additional scopes (separated by spaces) in the Scopes field to request more data from Okta. For example: okta.users.read okta.groups.read

Step 5: Store tokens to access Okta APIs (Optional)​

If you want to access Okta scopes and perform actions with user authorization, Logto needs to get specific scopes and store tokens.

1. Add the required scopes in your Okta developer console API permissions configuration and Logto Okta connector.
2. Enable Store tokens for persistent API access in Logto Okta connector. Logto will securely store Okta access and refresh tokens in the Secret Vault.
3. To ensure refresh tokens are returned, add the offline_access scope to your Okta application permissions and include it in your Logto Okta connector scopes. This scope allows your application to maintain access to resources for extended periods.

Step 6: Set email domains and enable the SSO connector​

Provide the email domains of your organization on Logto's connector SSO experience tab. This will enable the SSO connector as an authentication method for those users.

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

For more details about creating OIDC integration with Okta, please check Create OIDC App Integrations.

Save your configuration​

Double check you have filled out necessary values in the Logto connector configuration area. Click "Save and Done" (or "Save changes") and the Okta enterprise SSO connector should be available now.

Enable Okta enterprise SSO connector in Sign-in Experience​

You don’t need to configure enterprise connectors individually, Logto simplifies SSO integration into your applications with just one click.

1. Navigate to: Console > Sign-in & account > Sign-up and sign-in.
2. Enable the "Enterprise SSO" toggle.
3. Save changes.

Once enabled, a "Single Sign-On" button will appear on your sign-in page. Enterprise users with SSO-enabled email domains can access your services using their enterprise identity providers (IdPs).

To learn more about the SSO user experience, including SP-initiated SSO and IdP-initiated SSO, refer to User flows: Enterprise SSO.

Testing and Validation​

Return to your WordPress plugin app. You should now be able to sign in with Okta enterprise SSO. Enjoy!

Further readings​

End-user flows: Logto provides a out-of-the-box authentication flows including MFA and enterprise SSO, along with powerful APIs for flexible implementation of account settings, security verification, and multi-tenant experience.

Authorization: Authorization defines the actions a user can do or resources they can access after being authenticated. Explore how to protect your API for native and single-page applications and implement Role-based Access Control (RBAC).

Organizations: Particularly effective in multi-tenant SaaS and B2B apps, the organization feature enable tenant creation, member management, organization-level RBAC, and just-in-time-provisioning.

Customer IAM series Our serial blog posts about Customer (or Consumer) Identity and Access Management, from 101 to advanced topics and beyond.

In this article, we will go through the steps to quickly build the Okta enterprise SSO sign-in experience (user authentication) with Android (Kotlin / Java) and Logto.

Prerequisites

• A running Logto instance. Check out the introduction page to get started.
• Basic knowledge of Android (Kotlin / Java).
• A usable Okta enterprise SSO account.

Create an application in Logto​

Logto is based on OpenID Connect (OIDC) authentication and OAuth 2.0 authorization. It supports federated identity management across multiple applications, commonly called Single Sign-On (SSO).

To create your Native app application, simply follow these steps:

1. Open the Logto Console. In the "Get started" section, click the "View all" link to open the application frameworks list. Alternatively, you can navigate to Logto Console > Applications, and click the "Create application" button.
2. In the opening modal, click the "Native app" section or filter all the available "Native app" frameworks using the quick filter checkboxes on the left. Click the "Android" framework card to start creating your application.
3. Enter the application name, e.g., "Bookstore," and click "Create application".

🎉 Ta-da! You just created your first application in Logto. You'll see a congrats page which includes a detailed integration guide. Follow the guide to see what the experience will be in your application.

Integrate Android with Logto​

Installation​

Before you install Logto Android SDK, ensure mavenCentral() is added to your repository configuration in the Gradle project build file:

dependencyResolutionManagement {
  repositories {
    mavenCentral()
  }
}

Add Logto Android SDK to your dependencies:

dependencies {
  implementation("io.logto.sdk:android:1.1.3")
}

dependencies {
  implementation 'io.logto.sdk:android:1.1.3'
}

Since the SDK needs internet access, you need to add the following permission to your AndroidManifest.xml file:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools">

  <!-- add internet permission -->
  <uses-permission android:name="android.permission.INTERNET" />

  <!-- other configurations... -->
</manifest>

Init LogtoClient​

Create a LogtoViewModel.kt and init LogtoClient in this view model:

//...with other imports
import io.logto.sdk.android.LogtoClient
import io.logto.sdk.android.type.LogtoConfig

class LogtoViewModel(application: Application) : AndroidViewModel(application) {
    private val logtoConfig = LogtoConfig(
          endpoint = "<your-logto-endpoint>",
          appId = "<your-app-id>",
          scopes = null,
          resources = null,
          usingPersistStorage = true,
    )

    private val logtoClient = LogtoClient(logtoConfig, application)

    companion object {
        val Factory: ViewModelProvider.Factory = object : ViewModelProvider.Factory {
            @Suppress("UNCHECKED_CAST")
            override fun <T : ViewModel> create(
                modelClass: Class<T>,
                extras: CreationExtras
            ): T {
                // Get the Application object from extras
                val application = checkNotNull(extras[APPLICATION_KEY])
                return LogtoViewModel(application) as T
            }
        }
    }
}

then, create a LogtoViewModel for your MainActivity.kt:

//...with other imports
class MainActivity : AppCompatActivity() {
    private val logtoViewModel: LogtoViewModel by viewModels { LogtoViewModel.Factory }
    //...other codes
}

Configure redirect URI​

Let's switch to the Application details page of Logto Console. Add a Redirect URI io.logto.android://io.logto.sample/callback and click "Save changes".

Implement sign-in and sign-out​

You can use logtoClient.signIn to sign in the user and logtoClient.signOut to sign out the user.

For example, in an Android app:

//...with other imports
class LogtoViewModel(application: Application) : AndroidViewModel(application) {
    // ...other codes

    // Add a live data to observe the authentication status
    private val _authenticated = MutableLiveData(logtoClient.isAuthenticated)
    val authenticated: LiveData<Boolean>
        get() = _authenticated

    fun signIn(context: Activity) {
        logtoClient.signIn(context, "io.logto.android://io.logto.sample/callback") { logtoException ->
            logtoException?.let { println(it) }
            // Update the live data
            _authenticated.postValue(logtoClient.isAuthenticated)
        }
    }

    fun signOut() {
        logtoClient.signOut { logtoException ->
            logtoException?.let { println(it) }
            // Update the live data
            _authenticated.postValue(logtoClient.isAuthenticated)
        }
    }
}

Then call the signIn and signOut methods in your activity:

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        //...other codes

        // Assume you have a button with id "sign_in_button" in your layout
        val signInButton = findViewById<Button>(R.id.sign_in_button)
        signInButton.setOnClickListener {
            logtoViewModel.signIn(this)
        }

        // Assume you have a button with id "sign_out_button" in your layout
        val signOutButton = findViewById<Button>(R.id.sign_out_button)
        signOutButton.setOnClickListener {
            if (logtoViewModel.authenticated) { // Check if the user is authenticated
                logtoViewModel.signOut()
            }
        }

        // Observe the authentication status to update the UI
        logtoViewModel.authenticated.observe(this) { authenticated ->
            if (authenticated) {
                // The user is authenticated
                signInButton.visibility = View.GONE
                signOutButton.visibility = View.VISIBLE
            } else {
                // The user is not authenticated
                signInButton.visibility = View.VISIBLE
                signOutButton.visibility = View.GONE
            }
        }

    }
}

Checkpoint: Test your application​

Now, you can test your application:

1. Run your application, you will see the sign-in button.
2. Click the sign-in button, the SDK will init the sign-in process and redirect you to the Logto sign-in page.
3. After you signed in, you will be redirected back to your application and see the sign-out button.
4. Click the sign-out button to clear token storage and sign out.

Add Okta enterprise SSO connector​

To simplify access management and gain enterprise-level safeguards for your big clients, connect with Android as a federated identity provider. The Logto enterprise SSO connector helps you establish this connection in minutes by allowing several parameter inputs.

To add an enterprise SSO connector, simply follow these steps:

1. Navigate to Logto console > Enterprise SSO.

2. Click "Add enterprise connector" button and choose your SSO provider type. Choose from prebuilt connectors for Microsoft Entra ID (Azure AD), Google Workspace, and Okta, or create a custom SSO connection using the standard OpenID Connect (OIDC) or SAML protocol.
3. Provide a unique name (e.g., SSO sign-in for Acme Company).

4. Configure the connection with your IdP in the "Connection" tab. Check the guides above for each connector types.

5. Customize the SSO experience and enterprise’s email domain in the "Experience" tab. Users sign in with the SSO-enabled email domain will be redirected to SSO authentication.

6. Save changes.

Set up OIDC application on Okta admin portal​

Step 1: 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.

Click the Next button to continue.

Step 2: Configure the application settings​

1. Provide an 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.

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 the authorization code received from this URI.

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.

Click the Save button to save the application settings.

Step 3: Set up Logto connector with the client credentials​

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

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 4: Additional scopes (Optional)​

Scopes define the permissions your app requests from users and control which data your app can access from their Okta accounts. Requesting additional Okta permissions requires configuration on both sides:

In Okta admin console:

1. Navigate to Applications > Applications and select your OIDC application.
2. Go to the Assignments tab to ensure your app has access to the required users and groups.
3. For custom scopes, navigate to Security > API > Authorization Servers and select your authorization server.
4. Add custom scopes if needed:
   • Click Scopes and then Add Scope
   • Define scope names like okta.users.read or okta.groups.read for accessing Okta APIs
   • Configure consent requirements for each scope

For a complete list of available scopes and their descriptions, please refer to the Okta OIDC documentation.

In Logto Okta connector:

1. Logto automatically includes openid, profile, and email scopes to retrieve basic user identity information. You can leave the Scopes field blank if you only need basic user information.
2. Add offline_access to the Scopes field if you plan to store tokens for persistent API access. This scope enables refresh tokens for long-lived API access.
3. Add additional scopes (separated by spaces) in the Scopes field to request more data from Okta. For example: okta.users.read okta.groups.read

Step 5: Store tokens to access Okta APIs (Optional)​

If you want to access Okta scopes and perform actions with user authorization, Logto needs to get specific scopes and store tokens.

1. Add the required scopes in your Okta developer console API permissions configuration and Logto Okta connector.
2. Enable Store tokens for persistent API access in Logto Okta connector. Logto will securely store Okta access and refresh tokens in the Secret Vault.
3. To ensure refresh tokens are returned, add the offline_access scope to your Okta application permissions and include it in your Logto Okta connector scopes. This scope allows your application to maintain access to resources for extended periods.

Step 6: Set email domains and enable the SSO connector​

Provide the email domains of your organization on Logto's connector SSO experience tab. This will enable the SSO connector as an authentication method for those users.

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

For more details about creating OIDC integration with Okta, please check Create OIDC App Integrations.

Save your configuration​

Double check you have filled out necessary values in the Logto connector configuration area. Click "Save and Done" (or "Save changes") and the Okta enterprise SSO connector should be available now.

Enable Okta enterprise SSO connector in Sign-in Experience​

You don’t need to configure enterprise connectors individually, Logto simplifies SSO integration into your applications with just one click.

1. Navigate to: Console > Sign-in & account > Sign-up and sign-in.
2. Enable the "Enterprise SSO" toggle.
3. Save changes.

Once enabled, a "Single Sign-On" button will appear on your sign-in page. Enterprise users with SSO-enabled email domains can access your services using their enterprise identity providers (IdPs).

To learn more about the SSO user experience, including SP-initiated SSO and IdP-initiated SSO, refer to User flows: Enterprise SSO.

Testing and Validation​

Return to your Android (Kotlin / Java) app. You should now be able to sign in with Okta enterprise SSO. Enjoy!

Further readings​

End-user flows: Logto provides a out-of-the-box authentication flows including MFA and enterprise SSO, along with powerful APIs for flexible implementation of account settings, security verification, and multi-tenant experience.

Authorization: Authorization defines the actions a user can do or resources they can access after being authenticated. Explore how to protect your API for native and single-page applications and implement Role-based Access Control (RBAC).

Organizations: Particularly effective in multi-tenant SaaS and B2B apps, the organization feature enable tenant creation, member management, organization-level RBAC, and just-in-time-provisioning.

Customer IAM series Our serial blog posts about Customer (or Consumer) Identity and Access Management, from 101 to advanced topics and beyond.

In this article, we will go through the steps to quickly build the Okta enterprise SSO sign-in experience (user authentication) with .NET Core (Blazor Server) and Logto.

Prerequisites

• A running Logto instance. Check out the introduction page to get started.
• Basic knowledge of .NET Core (Blazor Server).
• A usable Okta enterprise SSO account.

Create an application in Logto​

Logto is based on OpenID Connect (OIDC) authentication and OAuth 2.0 authorization. It supports federated identity management across multiple applications, commonly called Single Sign-On (SSO).

To create your Traditional web application, simply follow these steps:

1. Open the Logto Console. In the "Get started" section, click the "View all" link to open the application frameworks list. Alternatively, you can navigate to Logto Console > Applications, and click the "Create application" button.
2. In the opening modal, click the "Traditional web" section or filter all the available "Traditional web" frameworks using the quick filter checkboxes on the left. Click the ".Net Core (Blazor Server)" framework card to start creating your application.
3. Enter the application name, e.g., "Bookstore," and click "Create application".

🎉 Ta-da! You just created your first application in Logto. You'll see a congrats page which includes a detailed integration guide. Follow the guide to see what the experience will be in your application.

Integrate .Net Core (Blazor Server) with Logto​

Installation​

Add the NuGet package to your project:

dotnet add package Logto.AspNetCore.Authentication

Add Logto authentication​

Open Startup.cs (or Program.cs) and add the following code to register Logto authentication services:

using Logto.AspNetCore.Authentication;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddLogtoAuthentication(options =>
{
  options.Endpoint = builder.Configuration["Logto:Endpoint"]!;
  options.AppId = builder.Configuration["Logto:AppId"]!;
  options.AppSecret = builder.Configuration["Logto:AppSecret"];
});

The AddLogtoAuthentication method will do the following things:

• Set the default authentication scheme to LogtoDefaults.CookieScheme.
• Set the default challenge scheme to LogtoDefaults.AuthenticationScheme.
• Set the default sign-out scheme to LogtoDefaults.AuthenticationScheme.
• Add cookie and OpenID Connect authentication handlers to the authentication scheme.

Sign-in and sign-out flows​

Before we proceed, there are two confusing terms in the .NET Core authentication middleware that we need to clarify:

1. CallbackPath: The URI that Logto will redirect the user back to after the user has signed in (the "redirect URI" in Logto)
2. RedirectUri: The URI that will be redirected to after necessary actions have been taken in the Logto authentication middleware.

The sign-in process can be illustrated as follows:

Similarly, .NET Core also has SignedOutCallbackPath and RedirectUri for the sign-out flow.

For the sake of clarity, we'll refer them as follows:

Configure redirect URIs​

First, let's configure the Logto redirect URI. Add the following URI to the "Redirect URIs" list in the Logto application details page:

http://localhost:3000/Callback

To configure the Logto post sign-out redirect URI, add the following URI to the "Post sign-out redirect URIs" list in the Logto application details page:

http://localhost:3000/SignedOutCallback

Change the default paths​

The Logto redirect URI has a default path of /Callback, and the Logto post sign-out redirect URI has a default path of /SignedOutCallback.

You can leave them as are if there's no special requirement. If you want to change it, you can set the CallbackPath and SignedOutCallbackPath property for LogtoOptions:

builder.Services.AddLogtoAuthentication(options =>
{
  // Other configurations...
  options.CallbackPath = "/Foo";
  options.SignedOutCallbackPath = "/Bar";
});

Remember to update the value in the Logto application details page accordingly.

Add routes​

Since Blazor Server uses SignalR to communicate between the server and the client, this means methods that directly manipulate the HTTP context (like issuing challenges or redirects) don't work as expected when called from a Blazor component.

To make it right, we need to explicitly add two endpoints for sign-in and sign-out redirects:

app.MapGet("/SignIn", async context =>
{
    if (!(context.User?.Identity?.IsAuthenticated ?? false))
    {
        await context.ChallengeAsync(new AuthenticationProperties { RedirectUri = "/" });
    } else {
        context.Response.Redirect("/");
    }
});

app.MapGet("/SignOut", async context =>
{
    if (context.User?.Identity?.IsAuthenticated ?? false)
    {
        await context.SignOutAsync(new AuthenticationProperties { RedirectUri = "/" });
    } else {
        context.Response.Redirect("/");
    }
});

Now we can redirect to these endpoints to trigger sign-in and sign-out.

Implement sign-in/sign-out buttons​

In the Razor component, add the following code:

@using Microsoft.AspNetCore.Components.Authorization
@using System.Security.Claims
@inject AuthenticationStateProvider AuthenticationStateProvider
@inject NavigationManager NavigationManager

@* ... *@

<p>Is authenticated: @User.Identity?.IsAuthenticated</p>
@if (User.Identity?.IsAuthenticated == true)
{
    <button @onclick="SignOut">Sign out</button>
}
else
{
    <button @onclick="SignIn">Sign in</button>
}

@* ... *@

@code {
    private ClaimsPrincipal? User { get; set; }

    protected override async Task OnInitializedAsync()
    {
        var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
        User = authState.User;
    }

    private void SignIn()
    {
        NavigationManager.NavigateTo("/SignIn", forceLoad: true);
    }

    private void SignOut()
    {
        NavigationManager.NavigateTo("/SignOut", forceLoad: true);
    }
}

Explanation:

• The injected AuthenticationStateProvider is used to get the current user's authentication state, and populate the User property.
• The SignIn and SignOut methods are used to redirect the user to the sign-in and sign-out endpoints respectively. Since the nature of Blazor Server, we need to use NavigationManager with force load to trigger the redirection.

The page will show the "Sign in" button if the user is not authenticated, and show the "Sign out" button if the user is authenticated.

The <AuthorizeView /> component​

Alternatively, you can use the AuthorizeView component to conditionally render content based on the user's authentication state. This component is useful when you want to show different content to authenticated and unauthenticated users.

In your Razor component, add the following code:

@using Microsoft.AspNetCore.Components.Authorization

@* ... *@

<AuthorizeView>
    <Authorized>
        <p>Name: @User?.Identity?.Name</p>
        @* Content for authenticated users *@
    </Authorized>
    <NotAuthorized>
        @* Content for unauthenticated users *@
    </NotAuthorized>
</AuthorizeView>

@* ... *@

The AuthorizeView component requires a cascading parameter of type Task<AuthenticationState>. A direct way to get this parameter is to add the <CascadingAuthenticationState> component. However, due to the nature of Blazor Server, we cannot simply add the component to the layout or the root component (it may not work as expected). Instead, we can add the following code to the builder (Program.cs or Startup.cs) to provide the cascading parameter:

builder.Services.AddCascadingAuthenticationState();

Then you can use the AuthorizeView component in every component that needs it.

Checkpoint: Test your application​

Now, you can test your application:

1. Run your application, you will see the sign-in button.
2. Click the sign-in button, the SDK will init the sign-in process and redirect you to the Logto sign-in page.
3. After you signed in, you will be redirected back to your application and see the sign-out button.
4. Click the sign-out button to clear token storage and sign out.

Add Okta enterprise SSO connector​

To simplify access management and gain enterprise-level safeguards for your big clients, connect with .Net Core (Blazor Server) as a federated identity provider. The Logto enterprise SSO connector helps you establish this connection in minutes by allowing several parameter inputs.

To add an enterprise SSO connector, simply follow these steps:

1. Navigate to Logto console > Enterprise SSO.

2. Click "Add enterprise connector" button and choose your SSO provider type. Choose from prebuilt connectors for Microsoft Entra ID (Azure AD), Google Workspace, and Okta, or create a custom SSO connection using the standard OpenID Connect (OIDC) or SAML protocol.
3. Provide a unique name (e.g., SSO sign-in for Acme Company).

4. Configure the connection with your IdP in the "Connection" tab. Check the guides above for each connector types.

5. Customize the SSO experience and enterprise’s email domain in the "Experience" tab. Users sign in with the SSO-enabled email domain will be redirected to SSO authentication.

6. Save changes.

Set up OIDC application on Okta admin portal​

Step 1: 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.

Click the Next button to continue.

Step 2: Configure the application settings​

1. Provide an 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.

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 the authorization code received from this URI.

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.

Click the Save button to save the application settings.

Step 3: Set up Logto connector with the client credentials​

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

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 4: Additional scopes (Optional)​

Scopes define the permissions your app requests from users and control which data your app can access from their Okta accounts. Requesting additional Okta permissions requires configuration on both sides:

In Okta admin console:

1. Navigate to Applications > Applications and select your OIDC application.
2. Go to the Assignments tab to ensure your app has access to the required users and groups.
3. For custom scopes, navigate to Security > API > Authorization Servers and select your authorization server.
4. Add custom scopes if needed:
   • Click Scopes and then Add Scope
   • Define scope names like okta.users.read or okta.groups.read for accessing Okta APIs
   • Configure consent requirements for each scope

For a complete list of available scopes and their descriptions, please refer to the Okta OIDC documentation.

In Logto Okta connector:

1. Logto automatically includes openid, profile, and email scopes to retrieve basic user identity information. You can leave the Scopes field blank if you only need basic user information.
2. Add offline_access to the Scopes field if you plan to store tokens for persistent API access. This scope enables refresh tokens for long-lived API access.
3. Add additional scopes (separated by spaces) in the Scopes field to request more data from Okta. For example: okta.users.read okta.groups.read

Step 5: Store tokens to access Okta APIs (Optional)​

If you want to access Okta scopes and perform actions with user authorization, Logto needs to get specific scopes and store tokens.

1. Add the required scopes in your Okta developer console API permissions configuration and Logto Okta connector.
2. Enable Store tokens for persistent API access in Logto Okta connector. Logto will securely store Okta access and refresh tokens in the Secret Vault.
3. To ensure refresh tokens are returned, add the offline_access scope to your Okta application permissions and include it in your Logto Okta connector scopes. This scope allows your application to maintain access to resources for extended periods.

Step 6: Set email domains and enable the SSO connector​

Provide the email domains of your organization on Logto's connector SSO experience tab. This will enable the SSO connector as an authentication method for those users.

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

For more details about creating OIDC integration with Okta, please check Create OIDC App Integrations.

Save your configuration​

Double check you have filled out necessary values in the Logto connector configuration area. Click "Save and Done" (or "Save changes") and the Okta enterprise SSO connector should be available now.

Enable Okta enterprise SSO connector in Sign-in Experience​

You don’t need to configure enterprise connectors individually, Logto simplifies SSO integration into your applications with just one click.

1. Navigate to: Console > Sign-in & account > Sign-up and sign-in.
2. Enable the "Enterprise SSO" toggle.
3. Save changes.

Once enabled, a "Single Sign-On" button will appear on your sign-in page. Enterprise users with SSO-enabled email domains can access your services using their enterprise identity providers (IdPs).

To learn more about the SSO user experience, including SP-initiated SSO and IdP-initiated SSO, refer to User flows: Enterprise SSO.

Testing and Validation​

Return to your .NET Core (Blazor Server) app. You should now be able to sign in with Okta enterprise SSO. Enjoy!

Further readings​

End-user flows: Logto provides a out-of-the-box authentication flows including MFA and enterprise SSO, along with powerful APIs for flexible implementation of account settings, security verification, and multi-tenant experience.

Authorization: Authorization defines the actions a user can do or resources they can access after being authenticated. Explore how to protect your API for native and single-page applications and implement Role-based Access Control (RBAC).

Organizations: Particularly effective in multi-tenant SaaS and B2B apps, the organization feature enable tenant creation, member management, organization-level RBAC, and just-in-time-provisioning.

Customer IAM series Our serial blog posts about Customer (or Consumer) Identity and Access Management, from 101 to advanced topics and beyond.

In this article, we will go through the steps to quickly build the Okta enterprise SSO sign-in experience (user authentication) with .NET Core (Blazor WebAssembly) and Logto.

Prerequisites

• A running Logto instance. Check out the introduction page to get started.
• Basic knowledge of .NET Core (Blazor WebAssembly).
• A usable Okta enterprise SSO account.

Create an application in Logto​

Logto is based on OpenID Connect (OIDC) authentication and OAuth 2.0 authorization. It supports federated identity management across multiple applications, commonly called Single Sign-On (SSO).

To create your Single page app application, simply follow these steps:

1. Open the Logto Console. In the "Get started" section, click the "View all" link to open the application frameworks list. Alternatively, you can navigate to Logto Console > Applications, and click the "Create application" button.
2. In the opening modal, click the "Single page app" section or filter all the available "Single page app" frameworks using the quick filter checkboxes on the left. Click the ".NET Core (Blazor WebAssembly)" framework card to start creating your application.
3. Enter the application name, e.g., "Bookstore," and click "Create application".

🎉 Ta-da! You just created your first application in Logto. You'll see a congrats page which includes a detailed integration guide. Follow the guide to see what the experience will be in your application.

Integrate .NET Core (Blazor WebAssembly) with Logto​

Installation​

Add the NuGet package to your project:

dotnet add package Blorc.OpenIdConnect

Add script references​

Include Blorc.Core/injector.js the index.html file:

<head>
  <!-- ... -->
  <script src="_content/Blorc.Core/injector.js"></script>
  <!-- ... -->
</head>

Register services​

Add the following code to the Program.cs file:

using Blorc.OpenIdConnect;
using Blorc.Services;

builder.Services.AddBlorcCore();
builder.Services.AddAuthorizationCore();
builder.Services.AddBlorcOpenIdConnect(
    options =>
    {
        builder.Configuration.Bind("IdentityServer", options);
    });

var webAssemblyHost = builder.Build();

await webAssemblyHost
    .ConfigureDocumentAsync(async documentService =>
    {
        await documentService.InjectBlorcCoreJsAsync();
        await documentService.InjectOpenIdConnectAsync();
    });

await webAssemblyHost.RunAsync();

Configure redirect URIs​

Before we dive into the details, here's a quick overview of the end-user experience. The sign-in process can be simplified as follows:

1. Your app invokes the sign-in method.
2. The user is redirected to the Logto sign-in page. For native apps, the system browser is opened.
3. The user signs in and is redirected back to your app (configured as the redirect URI).

Configure redirect URIs​

Switch to the application details page of Logto Console. Add a redirect URI http://localhost:3000/callback.

Just like signing in, users should be redirected to Logto for signing out of the shared session. Once finished, it would be great to redirect the user back to your website. For example, add http://localhost:3000/ as the post sign-out redirect URI section.

Then click "Save" to save the changes.

Configure application​

Add the following code to the appsettings.json file:

{
// ...
IdentityServer: {
  Authority: 'https://<your-logto-endpoint>/oidc',
  ClientId: '<your-logto-app-id>',
  PostLogoutRedirectUri: 'http://localhost:3000/',
  RedirectUri: 'http://localhost:3000/callback',
  ResponseType: 'code',
  Scope: 'openid profile', // Add more scopes if needed
},
}

Remember to add the RedirectUri and PostLogoutRedirectUri to the list of allowed redirect URIs in the Logto application settings. They are both the URL of your WASM application.

Add AuthorizeView component​

In the Razor pages that require authentication, add the AuthorizeView component. Let's assume it's the Home.razor page:

@using Microsoft.AspNetCore.Components.Authorization
@page "/"

<AuthorizeView>
    <Authorized>
        @* Signed in view *@
        <button @onclick="OnLogoutButtonClickAsync">
            Sign out
        </button>
    </Authorized>
    <NotAuthorized>
        @* Unauthenticated view *@
        <button @onclick="OnLoginButtonClickAsync">
            Sign in
        </button>
    </NotAuthorized>
</AuthorizeView>

Set up authentication​

In the Home.razor.cs file (create it if it doesn't exist), add the following code:

using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Blorc.OpenIdConnect;
using Microsoft.AspNetCore.Components.Authorization;

[Authorize]
public partial class Home : ComponentBase
{
    [Inject]
    public required IUserManager UserManager { get; set; }

    public User<Profile>? User { get; set; }

    [CascadingParameter]
    protected Task<AuthenticationState>? AuthenticationStateTask { get; set; }

    protected override async Task OnInitializedAsync()
    {
        User = await UserManager.GetUserAsync<User<Profile>>(AuthenticationStateTask!);
    }

    private async Task OnLoginButtonClickAsync(MouseEventArgs obj)
    {
        await UserManager.SignInRedirectAsync();
    }

    private async Task OnLogoutButtonClickAsync(MouseEventArgs obj)
    {
        await UserManager.SignOutRedirectAsync();
    }
}

Once the user is authenticated, the User property will be populated with the user information.

Checkpoint: Test your application​

Now, you can test your application:

1. Run your application, you will see the sign-in button.
2. Click the sign-in button, the SDK will init the sign-in process and redirect you to the Logto sign-in page.
3. After you signed in, you will be redirected back to your application and see the sign-out button.
4. Click the sign-out button to clear token storage and sign out.

Add Okta enterprise SSO connector​

To simplify access management and gain enterprise-level safeguards for your big clients, connect with .NET Core (Blazor WebAssembly) as a federated identity provider. The Logto enterprise SSO connector helps you establish this connection in minutes by allowing several parameter inputs.

To add an enterprise SSO connector, simply follow these steps:

1. Navigate to Logto console > Enterprise SSO.

2. Click "Add enterprise connector" button and choose your SSO provider type. Choose from prebuilt connectors for Microsoft Entra ID (Azure AD), Google Workspace, and Okta, or create a custom SSO connection using the standard OpenID Connect (OIDC) or SAML protocol.
3. Provide a unique name (e.g., SSO sign-in for Acme Company).

4. Configure the connection with your IdP in the "Connection" tab. Check the guides above for each connector types.

5. Customize the SSO experience and enterprise’s email domain in the "Experience" tab. Users sign in with the SSO-enabled email domain will be redirected to SSO authentication.

6. Save changes.

Set up OIDC application on Okta admin portal​

Step 1: 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.

Click the Next button to continue.

Step 2: Configure the application settings​

1. Provide an 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.

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 the authorization code received from this URI.

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.

Click the Save button to save the application settings.

Step 3: Set up Logto connector with the client credentials​

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

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 4: Additional scopes (Optional)​

Scopes define the permissions your app requests from users and control which data your app can access from their Okta accounts. Requesting additional Okta permissions requires configuration on both sides:

In Okta admin console:

1. Navigate to Applications > Applications and select your OIDC application.
2. Go to the Assignments tab to ensure your app has access to the required users and groups.
3. For custom scopes, navigate to Security > API > Authorization Servers and select your authorization server.
4. Add custom scopes if needed:
   • Click Scopes and then Add Scope
   • Define scope names like okta.users.read or okta.groups.read for accessing Okta APIs
   • Configure consent requirements for each scope

For a complete list of available scopes and their descriptions, please refer to the Okta OIDC documentation.

In Logto Okta connector:

1. Logto automatically includes openid, profile, and email scopes to retrieve basic user identity information. You can leave the Scopes field blank if you only need basic user information.
2. Add offline_access to the Scopes field if you plan to store tokens for persistent API access. This scope enables refresh tokens for long-lived API access.
3. Add additional scopes (separated by spaces) in the Scopes field to request more data from Okta. For example: okta.users.read okta.groups.read

Step 5: Store tokens to access Okta APIs (Optional)​

If you want to access Okta scopes and perform actions with user authorization, Logto needs to get specific scopes and store tokens.

1. Add the required scopes in your Okta developer console API permissions configuration and Logto Okta connector.
2. Enable Store tokens for persistent API access in Logto Okta connector. Logto will securely store Okta access and refresh tokens in the Secret Vault.
3. To ensure refresh tokens are returned, add the offline_access scope to your Okta application permissions and include it in your Logto Okta connector scopes. This scope allows your application to maintain access to resources for extended periods.

Step 6: Set email domains and enable the SSO connector​

Provide the email domains of your organization on Logto's connector SSO experience tab. This will enable the SSO connector as an authentication method for those users.

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

For more details about creating OIDC integration with Okta, please check Create OIDC App Integrations.

Save your configuration​

Double check you have filled out necessary values in the Logto connector configuration area. Click "Save and Done" (or "Save changes") and the Okta enterprise SSO connector should be available now.

Enable Okta enterprise SSO connector in Sign-in Experience​

You don’t need to configure enterprise connectors individually, Logto simplifies SSO integration into your applications with just one click.

1. Navigate to: Console > Sign-in & account > Sign-up and sign-in.
2. Enable the "Enterprise SSO" toggle.
3. Save changes.

Once enabled, a "Single Sign-On" button will appear on your sign-in page. Enterprise users with SSO-enabled email domains can access your services using their enterprise identity providers (IdPs).

To learn more about the SSO user experience, including SP-initiated SSO and IdP-initiated SSO, refer to User flows: Enterprise SSO.

Testing and Validation​

Return to your .NET Core (Blazor WebAssembly) app. You should now be able to sign in with Okta enterprise SSO. Enjoy!

Further readings​

End-user flows: Logto provides a out-of-the-box authentication flows including MFA and enterprise SSO, along with powerful APIs for flexible implementation of account settings, security verification, and multi-tenant experience.

Authorization: Authorization defines the actions a user can do or resources they can access after being authenticated. Explore how to protect your API for native and single-page applications and implement Role-based Access Control (RBAC).

Organizations: Particularly effective in multi-tenant SaaS and B2B apps, the organization feature enable tenant creation, member management, organization-level RBAC, and just-in-time-provisioning.

Customer IAM series Our serial blog posts about Customer (or Consumer) Identity and Access Management, from 101 to advanced topics and beyond.

In this article, we will go through the steps to quickly build the Okta enterprise SSO sign-in experience (user authentication) with .NET Core (MVC) and Logto.

Prerequisites

• A running Logto instance. Check out the introduction page to get started.
• Basic knowledge of .NET Core (MVC).
• A usable Okta enterprise SSO account.

Create an application in Logto​

Logto is based on OpenID Connect (OIDC) authentication and OAuth 2.0 authorization. It supports federated identity management across multiple applications, commonly called Single Sign-On (SSO).

To create your Traditional web application, simply follow these steps:

1. Open the Logto Console. In the "Get started" section, click the "View all" link to open the application frameworks list. Alternatively, you can navigate to Logto Console > Applications, and click the "Create application" button.
2. In the opening modal, click the "Traditional web" section or filter all the available "Traditional web" frameworks using the quick filter checkboxes on the left. Click the ".NET Core (MVC)" framework card to start creating your application.
3. Enter the application name, e.g., "Bookstore," and click "Create application".

🎉 Ta-da! You just created your first application in Logto. You'll see a congrats page which includes a detailed integration guide. Follow the guide to see what the experience will be in your application.

Integrate .NET Core (MVC) with Logto​

Installation​

Add the NuGet package to your project:

dotnet add package Logto.AspNetCore.Authentication

Add Logto authentication​

Open Startup.cs (or Program.cs) and add the following code to register Logto authentication services:

using Logto.AspNetCore.Authentication;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddLogtoAuthentication(options =>
{
  options.Endpoint = builder.Configuration["Logto:Endpoint"]!;
  options.AppId = builder.Configuration["Logto:AppId"]!;
  options.AppSecret = builder.Configuration["Logto:AppSecret"];
});

The AddLogtoAuthentication method will do the following things:

• Set the default authentication scheme to LogtoDefaults.CookieScheme.
• Set the default challenge scheme to LogtoDefaults.AuthenticationScheme.
• Set the default sign-out scheme to LogtoDefaults.AuthenticationScheme.
• Add cookie and OpenID Connect authentication handlers to the authentication scheme.

Sign-in and sign-out flows​

Before we proceed, there are two confusing terms in the .NET Core authentication middleware that we need to clarify:

1. CallbackPath: The URI that Logto will redirect the user back to after the user has signed in (the "redirect URI" in Logto)
2. RedirectUri: The URI that will be redirected to after necessary actions have been taken in the Logto authentication middleware.

The sign-in process can be illustrated as follows:

Similarly, .NET Core also has SignedOutCallbackPath and RedirectUri for the sign-out flow.

For the sake of clarity, we'll refer them as follows:

Configure redirect URIs​

First, let's configure the Logto redirect URI. Add the following URI to the "Redirect URIs" list in the Logto application details page:

http://localhost:3000/Callback

To configure the Logto post sign-out redirect URI, add the following URI to the "Post sign-out redirect URIs" list in the Logto application details page:

http://localhost:3000/SignedOutCallback

Change the default paths​

The Logto redirect URI has a default path of /Callback, and the Logto post sign-out redirect URI has a default path of /SignedOutCallback.

You can leave them as are if there's no special requirement. If you want to change it, you can set the CallbackPath and SignedOutCallbackPath property for LogtoOptions:

builder.Services.AddLogtoAuthentication(options =>
{
  // Other configurations...
  options.CallbackPath = "/Foo";
  options.SignedOutCallbackPath = "/Bar";
});

Remember to update the value in the Logto application details page accordingly.

Implement sign-in/sign-out buttons​

First, add actions methods to your Controller, for example:

public class HomeController : Controller
{
  public IActionResult SignIn()
  {
    // This will redirect the user to the Logto sign-in page.
    return Challenge(new AuthenticationProperties { RedirectUri = "/" });
  }

  // Use the `new` keyword to avoid conflict with the `ControllerBase.SignOut` method
  new public IActionResult SignOut()
  {
    // This will clear the authentication cookie and redirect the user to the Logto sign-out page
    // to clear the Logto session as well.
    return SignOut(new AuthenticationProperties { RedirectUri = "/" });
  }
}

Then, add the links to your View:

<p>Is authenticated: @User.Identity?.IsAuthenticated</p>
@if (User.Identity?.IsAuthenticated == true) {
  <a asp-controller="Home" asp-action="SignOut">Sign out</a>
} else {
  <a asp-controller="Home" asp-action="SignIn">Sign in</a>
}

It will show the "Sign in" link if the user is not authenticated, and show the "Sign out" link if the user is authenticated.

Checkpoint: Test your application​

Now, you can test your application:

1. Run your application, you will see the sign-in button.
2. Click the sign-in button, the SDK will init the sign-in process and redirect you to the Logto sign-in page.
3. After you signed in, you will be redirected back to your application and see the sign-out button.
4. Click the sign-out button to clear token storage and sign out.

Add Okta enterprise SSO connector​

To simplify access management and gain enterprise-level safeguards for your big clients, connect with .NET Core (MVC) as a federated identity provider. The Logto enterprise SSO connector helps you establish this connection in minutes by allowing several parameter inputs.

To add an enterprise SSO connector, simply follow these steps:

1. Navigate to Logto console > Enterprise SSO.

2. Click "Add enterprise connector" button and choose your SSO provider type. Choose from prebuilt connectors for Microsoft Entra ID (Azure AD), Google Workspace, and Okta, or create a custom SSO connection using the standard OpenID Connect (OIDC) or SAML protocol.
3. Provide a unique name (e.g., SSO sign-in for Acme Company).

4. Configure the connection with your IdP in the "Connection" tab. Check the guides above for each connector types.

5. Customize the SSO experience and enterprise’s email domain in the "Experience" tab. Users sign in with the SSO-enabled email domain will be redirected to SSO authentication.

6. Save changes.

Set up OIDC application on Okta admin portal​

Step 1: 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.

Click the Next button to continue.

Step 2: Configure the application settings​

1. Provide an 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.

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 the authorization code received from this URI.

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.

Click the Save button to save the application settings.

Step 3: Set up Logto connector with the client credentials​

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

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 4: Additional scopes (Optional)​

Scopes define the permissions your app requests from users and control which data your app can access from their Okta accounts. Requesting additional Okta permissions requires configuration on both sides:

In Okta admin console:

1. Navigate to Applications > Applications and select your OIDC application.
2. Go to the Assignments tab to ensure your app has access to the required users and groups.
3. For custom scopes, navigate to Security > API > Authorization Servers and select your authorization server.
4. Add custom scopes if needed:
   • Click Scopes and then Add Scope
   • Define scope names like okta.users.read or okta.groups.read for accessing Okta APIs
   • Configure consent requirements for each scope

For a complete list of available scopes and their descriptions, please refer to the Okta OIDC documentation.

In Logto Okta connector:

1. Logto automatically includes openid, profile, and email scopes to retrieve basic user identity information. You can leave the Scopes field blank if you only need basic user information.
2. Add offline_access to the Scopes field if you plan to store tokens for persistent API access. This scope enables refresh tokens for long-lived API access.
3. Add additional scopes (separated by spaces) in the Scopes field to request more data from Okta. For example: okta.users.read okta.groups.read

Step 5: Store tokens to access Okta APIs (Optional)​

If you want to access Okta scopes and perform actions with user authorization, Logto needs to get specific scopes and store tokens.

1. Add the required scopes in your Okta developer console API permissions configuration and Logto Okta connector.
2. Enable Store tokens for persistent API access in Logto Okta connector. Logto will securely store Okta access and refresh tokens in the Secret Vault.
3. To ensure refresh tokens are returned, add the offline_access scope to your Okta application permissions and include it in your Logto Okta connector scopes. This scope allows your application to maintain access to resources for extended periods.

Step 6: Set email domains and enable the SSO connector​

Provide the email domains of your organization on Logto's connector SSO experience tab. This will enable the SSO connector as an authentication method for those users.

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

For more details about creating OIDC integration with Okta, please check Create OIDC App Integrations.

Save your configuration​

Double check you have filled out necessary values in the Logto connector configuration area. Click "Save and Done" (or "Save changes") and the Okta enterprise SSO connector should be available now.

Enable Okta enterprise SSO connector in Sign-in Experience​

You don’t need to configure enterprise connectors individually, Logto simplifies SSO integration into your applications with just one click.

1. Navigate to: Console > Sign-in & account > Sign-up and sign-in.
2. Enable the "Enterprise SSO" toggle.
3. Save changes.

Once enabled, a "Single Sign-On" button will appear on your sign-in page. Enterprise users with SSO-enabled email domains can access your services using their enterprise identity providers (IdPs).

To learn more about the SSO user experience, including SP-initiated SSO and IdP-initiated SSO, refer to User flows: Enterprise SSO.

Testing and Validation​

Return to your .NET Core (MVC) app. You should now be able to sign in with Okta enterprise SSO. Enjoy!

Further readings​

End-user flows: Logto provides a out-of-the-box authentication flows including MFA and enterprise SSO, along with powerful APIs for flexible implementation of account settings, security verification, and multi-tenant experience.

Authorization: Authorization defines the actions a user can do or resources they can access after being authenticated. Explore how to protect your API for native and single-page applications and implement Role-based Access Control (RBAC).

Organizations: Particularly effective in multi-tenant SaaS and B2B apps, the organization feature enable tenant creation, member management, organization-level RBAC, and just-in-time-provisioning.

Customer IAM series Our serial blog posts about Customer (or Consumer) Identity and Access Management, from 101 to advanced topics and beyond.

In this article, we will go through the steps to quickly build the Okta enterprise SSO sign-in experience (user authentication) with .NET Core (Razor Pages) and Logto.

Prerequisites

• A running Logto instance. Check out the introduction page to get started.
• Basic knowledge of .NET Core (Razor Pages).
• A usable Okta enterprise SSO account.

Create an application in Logto​

Logto is based on OpenID Connect (OIDC) authentication and OAuth 2.0 authorization. It supports federated identity management across multiple applications, commonly called Single Sign-On (SSO).

To create your Traditional web application, simply follow these steps:

1. Open the Logto Console. In the "Get started" section, click the "View all" link to open the application frameworks list. Alternatively, you can navigate to Logto Console > Applications, and click the "Create application" button.
2. In the opening modal, click the "Traditional web" section or filter all the available "Traditional web" frameworks using the quick filter checkboxes on the left. Click the ".NET Core (Razor Pages)" framework card to start creating your application.
3. Enter the application name, e.g., "Bookstore," and click "Create application".

🎉 Ta-da! You just created your first application in Logto. You'll see a congrats page which includes a detailed integration guide. Follow the guide to see what the experience will be in your application.

Integrate .NET Core (Razor Pages) with Logto​

Installation​

Add the NuGet package to your project:

dotnet add package Logto.AspNetCore.Authentication

Add Logto authentication​

Open Startup.cs (or Program.cs) and add the following code to register Logto authentication services:

using Logto.AspNetCore.Authentication;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddLogtoAuthentication(options =>
{
  options.Endpoint = builder.Configuration["Logto:Endpoint"]!;
  options.AppId = builder.Configuration["Logto:AppId"]!;
  options.AppSecret = builder.Configuration["Logto:AppSecret"];
});

The AddLogtoAuthentication method will do the following things:

• Set the default authentication scheme to LogtoDefaults.CookieScheme.
• Set the default challenge scheme to LogtoDefaults.AuthenticationScheme.
• Set the default sign-out scheme to LogtoDefaults.AuthenticationScheme.
• Add cookie and OpenID Connect authentication handlers to the authentication scheme.

Sign-in and sign-out flows​

Before we proceed, there are two confusing terms in the .NET Core authentication middleware that we need to clarify:

1. CallbackPath: The URI that Logto will redirect the user back to after the user has signed in (the "redirect URI" in Logto)
2. RedirectUri: The URI that will be redirected to after necessary actions have been taken in the Logto authentication middleware.

The sign-in process can be illustrated as follows:

Similarly, .NET Core also has SignedOutCallbackPath and RedirectUri for the sign-out flow.

For the sake of clarity, we'll refer them as follows:

Configure redirect URIs​

First, let's configure the Logto redirect URI. Add the following URI to the "Redirect URIs" list in the Logto application details page:

http://localhost:3000/Callback

To configure the Logto post sign-out redirect URI, add the following URI to the "Post sign-out redirect URIs" list in the Logto application details page:

http://localhost:3000/SignedOutCallback

Change the default paths​

The Logto redirect URI has a default path of /Callback, and the Logto post sign-out redirect URI has a default path of /SignedOutCallback.

You can leave them as are if there's no special requirement. If you want to change it, you can set the CallbackPath and SignedOutCallbackPath property for LogtoOptions:

builder.Services.AddLogtoAuthentication(options =>
{
  // Other configurations...
  options.CallbackPath = "/Foo";
  options.SignedOutCallbackPath = "/Bar";
});

Remember to update the value in the Logto application details page accordingly.

Implement sign-in/sign-out buttons​

First, add the handler methods to your PageModel, for example:

public class IndexModel : PageModel
{
  public async Task OnPostSignInAsync()
  {
    await HttpContext.ChallengeAsync(new AuthenticationProperties
    {
      RedirectUri = "/"
    });
  }

  public async Task OnPostSignOutAsync()
  {
    await HttpContext.SignOutAsync(new AuthenticationProperties
    {
      RedirectUri = "/"
    });
  }
}

Then, add the buttons to your Razor page:

<p>Is authenticated: @User.Identity?.IsAuthenticated</p>
<form method="post">
  @if (User.Identity?.IsAuthenticated == true) {
    <button type="submit" asp-page-handler="SignOut">Sign out</button>
  } else {
    <button type="submit" asp-page-handler="SignIn">Sign in</button>
  }
</form>

It will show the "Sign in" button if the user is not authenticated, and show the "Sign out" button if the user is authenticated.

Checkpoint: Test your application​

Now, you can test your application:

1. Run your application, you will see the sign-in button.
2. Click the sign-in button, the SDK will init the sign-in process and redirect you to the Logto sign-in page.
3. After you signed in, you will be redirected back to your application and see the sign-out button.
4. Click the sign-out button to clear token storage and sign out.

Add Okta enterprise SSO connector​

To simplify access management and gain enterprise-level safeguards for your big clients, connect with .NET Core (Razor Pages) as a federated identity provider. The Logto enterprise SSO connector helps you establish this connection in minutes by allowing several parameter inputs.

To add an enterprise SSO connector, simply follow these steps:

1. Navigate to Logto console > Enterprise SSO.

2. Click "Add enterprise connector" button and choose your SSO provider type. Choose from prebuilt connectors for Microsoft Entra ID (Azure AD), Google Workspace, and Okta, or create a custom SSO connection using the standard OpenID Connect (OIDC) or SAML protocol.
3. Provide a unique name (e.g., SSO sign-in for Acme Company).

4. Configure the connection with your IdP in the "Connection" tab. Check the guides above for each connector types.

5. Customize the SSO experience and enterprise’s email domain in the "Experience" tab. Users sign in with the SSO-enabled email domain will be redirected to SSO authentication.

6. Save changes.

Set up OIDC application on Okta admin portal​

Step 1: 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.

Click the Next button to continue.

Step 2: Configure the application settings​

1. Provide an 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.

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 the authorization code received from this URI.

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.

Click the Save button to save the application settings.

Step 3: Set up Logto connector with the client credentials​

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

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 4: Additional scopes (Optional)​

Scopes define the permissions your app requests from users and control which data your app can access from their Okta accounts. Requesting additional Okta permissions requires configuration on both sides:

In Okta admin console:

1. Navigate to Applications > Applications and select your OIDC application.
2. Go to the Assignments tab to ensure your app has access to the required users and groups.
3. For custom scopes, navigate to Security > API > Authorization Servers and select your authorization server.
4. Add custom scopes if needed:
   • Click Scopes and then Add Scope
   • Define scope names like okta.users.read or okta.groups.read for accessing Okta APIs
   • Configure consent requirements for each scope

For a complete list of available scopes and their descriptions, please refer to the Okta OIDC documentation.

In Logto Okta connector:

1. Logto automatically includes openid, profile, and email scopes to retrieve basic user identity information. You can leave the Scopes field blank if you only need basic user information.
2. Add offline_access to the Scopes field if you plan to store tokens for persistent API access. This scope enables refresh tokens for long-lived API access.
3. Add additional scopes (separated by spaces) in the Scopes field to request more data from Okta. For example: okta.users.read okta.groups.read

Step 5: Store tokens to access Okta APIs (Optional)​

If you want to access Okta scopes and perform actions with user authorization, Logto needs to get specific scopes and store tokens.

1. Add the required scopes in your Okta developer console API permissions configuration and Logto Okta connector.
2. Enable Store tokens for persistent API access in Logto Okta connector. Logto will securely store Okta access and refresh tokens in the Secret Vault.
3. To ensure refresh tokens are returned, add the offline_access scope to your Okta application permissions and include it in your Logto Okta connector scopes. This scope allows your application to maintain access to resources for extended periods.

Step 6: Set email domains and enable the SSO connector​

Provide the email domains of your organization on Logto's connector SSO experience tab. This will enable the SSO connector as an authentication method for those users.

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

For more details about creating OIDC integration with Okta, please check Create OIDC App Integrations.

Save your configuration​

Double check you have filled out necessary values in the Logto connector configuration area. Click "Save and Done" (or "Save changes") and the Okta enterprise SSO connector should be available now.

Enable Okta enterprise SSO connector in Sign-in Experience​

You don’t need to configure enterprise connectors individually, Logto simplifies SSO integration into your applications with just one click.

1. Navigate to: Console > Sign-in & account > Sign-up and sign-in.
2. Enable the "Enterprise SSO" toggle.
3. Save changes.

Once enabled, a "Single Sign-On" button will appear on your sign-in page. Enterprise users with SSO-enabled email domains can access your services using their enterprise identity providers (IdPs).

To learn more about the SSO user experience, including SP-initiated SSO and IdP-initiated SSO, refer to User flows: Enterprise SSO.

Testing and Validation​

Return to your .NET Core (Razor Pages) app. You should now be able to sign in with Okta enterprise SSO. Enjoy!

Further readings​

End-user flows: Logto provides a out-of-the-box authentication flows including MFA and enterprise SSO, along with powerful APIs for flexible implementation of account settings, security verification, and multi-tenant experience.

Authorization: Authorization defines the actions a user can do or resources they can access after being authenticated. Explore how to protect your API for native and single-page applications and implement Role-based Access Control (RBAC).

Organizations: Particularly effective in multi-tenant SaaS and B2B apps, the organization feature enable tenant creation, member management, organization-level RBAC, and just-in-time-provisioning.

Customer IAM series Our serial blog posts about Customer (or Consumer) Identity and Access Management, from 101 to advanced topics and beyond.

In this article, we will go through the steps to quickly build the Okta enterprise SSO sign-in experience (user authentication) with Expo (React Native) and Logto.

Prerequisites

• A running Logto instance. Check out the introduction page to get started.
• Basic knowledge of Expo (React Native).
• A usable Okta enterprise SSO account.

Create an application in Logto​

Logto is based on OpenID Connect (OIDC) authentication and OAuth 2.0 authorization. It supports federated identity management across multiple applications, commonly called Single Sign-On (SSO).

To create your Native app application, simply follow these steps:

1. Open the Logto Console. In the "Get started" section, click the "View all" link to open the application frameworks list. Alternatively, you can navigate to Logto Console > Applications, and click the "Create application" button.
2. In the opening modal, click the "Native app" section or filter all the available "Native app" frameworks using the quick filter checkboxes on the left. Click the "Expo" framework card to start creating your application.
3. Enter the application name, e.g., "Bookstore," and click "Create application".

🎉 Ta-da! You just created your first application in Logto. You'll see a congrats page which includes a detailed integration guide. Follow the guide to see what the experience will be in your application.

Integrate Expo with Logto​

Installation​

Install Logto SDK and peer dependencies via your favorite package manager:

npm i @logto/rn
npm i expo-crypto expo-secure-store expo-web-browser @react-native-async-storage/async-storage

yarn add @logto/rn
yarn add expo-crypto expo-secure-store expo-web-browser @react-native-async-storage/async-storage

pnpm add @logto/rn
pnpm add expo-crypto expo-secure-store expo-web-browser @react-native-async-storage/async-storage

The @logto/rn package is the SDK for Logto. The remaining packages are its peer dependencies. They couldn't be listed as direct dependencies because the Expo CLI requires that all dependencies for native modules be installed directly within the root project's package.json.

Init Logto provider​

Import and use LogtoProvider to provide a Logto context:

import { LogtoProvider, LogtoConfig } from '@logto/rn';

const config: LogtoConfig = {
  endpoint: '<your-logto-endpoint>',
  appId: '<your-application-id>',
};

const App = () => (
  <LogtoProvider config={config}>
    <YourAppContent />
  </LogtoProvider>
);

Implement sign-in and sign-out​

Before we dive into the details, here's a quick overview of the end-user experience. The sign-in process can be simplified as follows:

1. Your app invokes the sign-in method.
2. The user is redirected to the Logto sign-in page. For native apps, the system browser is opened.
3. The user signs in and is redirected back to your app (configured as the redirect URI).

Switch to the application details page of Logto Console. Add a native redirect URI (for example, io.logto://callback), then click "Save".

• For iOS, the redirect URI scheme does not really matter since the ASWebAuthenticationSession class will listen to the redirect URI regardless of if it's registered.

• For Android, the redirect URI scheme must be filled in Expo's app.json file, for example:

  app.json

  {
    "expo": {
      "scheme": "io.logto"
    }
  }
  

Now back to your app, you can use useLogto hook to sign in and sign out:

import { useLogto } from '@logto/rn';
import { Button } from 'react-native';

const Content = () => {
  const { signIn, signOut, isAuthenticated } = useLogto();

  return (
    <div>
      {isAuthenticated ? (
        <Button title="Sign out" onPress={async () => signOut()} />
      ) : (
        // Replace the redirect URI with your own
        <Button title="Sign in" onPress={async () => signIn('io.logto://callback')} />
      )}
    </div>
  );
};

Checkpoint: Test your application​

Now, you can test your application:

1. Run your application, you will see the sign-in button.
2. Click the sign-in button, the SDK will init the sign-in process and redirect you to the Logto sign-in page.
3. After you signed in, you will be redirected back to your application and see the sign-out button.
4. Click the sign-out button to clear token storage and sign out.

Add Okta enterprise SSO connector​

To simplify access management and gain enterprise-level safeguards for your big clients, connect with Expo as a federated identity provider. The Logto enterprise SSO connector helps you establish this connection in minutes by allowing several parameter inputs.

To add an enterprise SSO connector, simply follow these steps:

1. Navigate to Logto console > Enterprise SSO.

2. Click "Add enterprise connector" button and choose your SSO provider type. Choose from prebuilt connectors for Microsoft Entra ID (Azure AD), Google Workspace, and Okta, or create a custom SSO connection using the standard OpenID Connect (OIDC) or SAML protocol.
3. Provide a unique name (e.g., SSO sign-in for Acme Company).

4. Configure the connection with your IdP in the "Connection" tab. Check the guides above for each connector types.

5. Customize the SSO experience and enterprise’s email domain in the "Experience" tab. Users sign in with the SSO-enabled email domain will be redirected to SSO authentication.

6. Save changes.

Set up OIDC application on Okta admin portal​

Step 1: 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.

Click the Next button to continue.

Step 2: Configure the application settings​

1. Provide an 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.

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 the authorization code received from this URI.

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.

Click the Save button to save the application settings.

Step 3: Set up Logto connector with the client credentials​

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

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 4: Additional scopes (Optional)​

Scopes define the permissions your app requests from users and control which data your app can access from their Okta accounts. Requesting additional Okta permissions requires configuration on both sides:

In Okta admin console:

1. Navigate to Applications > Applications and select your OIDC application.
2. Go to the Assignments tab to ensure your app has access to the required users and groups.
3. For custom scopes, navigate to Security > API > Authorization Servers and select your authorization server.
4. Add custom scopes if needed:
   • Click Scopes and then Add Scope
   • Define scope names like okta.users.read or okta.groups.read for accessing Okta APIs
   • Configure consent requirements for each scope

For a complete list of available scopes and their descriptions, please refer to the Okta OIDC documentation.

In Logto Okta connector:

1. Logto automatically includes openid, profile, and email scopes to retrieve basic user identity information. You can leave the Scopes field blank if you only need basic user information.
2. Add offline_access to the Scopes field if you plan to store tokens for persistent API access. This scope enables refresh tokens for long-lived API access.
3. Add additional scopes (separated by spaces) in the Scopes field to request more data from Okta. For example: okta.users.read okta.groups.read

Step 5: Store tokens to access Okta APIs (Optional)​

If you want to access Okta scopes and perform actions with user authorization, Logto needs to get specific scopes and store tokens.

1. Add the required scopes in your Okta developer console API permissions configuration and Logto Okta connector.
2. Enable Store tokens for persistent API access in Logto Okta connector. Logto will securely store Okta access and refresh tokens in the Secret Vault.
3. To ensure refresh tokens are returned, add the offline_access scope to your Okta application permissions and include it in your Logto Okta connector scopes. This scope allows your application to maintain access to resources for extended periods.

Step 6: Set email domains and enable the SSO connector​

Provide the email domains of your organization on Logto's connector SSO experience tab. This will enable the SSO connector as an authentication method for those users.

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

For more details about creating OIDC integration with Okta, please check Create OIDC App Integrations.

Save your configuration​

Double check you have filled out necessary values in the Logto connector configuration area. Click "Save and Done" (or "Save changes") and the Okta enterprise SSO connector should be available now.

Enable Okta enterprise SSO connector in Sign-in Experience​

You don’t need to configure enterprise connectors individually, Logto simplifies SSO integration into your applications with just one click.

1. Navigate to: Console > Sign-in & account > Sign-up and sign-in.
2. Enable the "Enterprise SSO" toggle.
3. Save changes.

Once enabled, a "Single Sign-On" button will appear on your sign-in page. Enterprise users with SSO-enabled email domains can access your services using their enterprise identity providers (IdPs).

To learn more about the SSO user experience, including SP-initiated SSO and IdP-initiated SSO, refer to User flows: Enterprise SSO.

Testing and Validation​

Return to your Expo (React Native) app. You should now be able to sign in with Okta enterprise SSO. Enjoy!

Further readings​

End-user flows: Logto provides a out-of-the-box authentication flows including MFA and enterprise SSO, along with powerful APIs for flexible implementation of account settings, security verification, and multi-tenant experience.

Authorization: Authorization defines the actions a user can do or resources they can access after being authenticated. Explore how to protect your API for native and single-page applications and implement Role-based Access Control (RBAC).

Organizations: Particularly effective in multi-tenant SaaS and B2B apps, the organization feature enable tenant creation, member management, organization-level RBAC, and just-in-time-provisioning.

Customer IAM series Our serial blog posts about Customer (or Consumer) Identity and Access Management, from 101 to advanced topics and beyond.

In this article, we will go through the steps to quickly build the Okta enterprise SSO sign-in experience (user authentication) with Express and Logto.

Prerequisites

• A running Logto instance. Check out the introduction page to get started.
• Basic knowledge of Express.
• A usable Okta enterprise SSO account.

Create an application in Logto​

Logto is based on OpenID Connect (OIDC) authentication and OAuth 2.0 authorization. It supports federated identity management across multiple applications, commonly called Single Sign-On (SSO).

To create your Traditional web application, simply follow these steps:

1. Open the Logto Console. In the "Get started" section, click the "View all" link to open the application frameworks list. Alternatively, you can navigate to Logto Console > Applications, and click the "Create application" button.
2. In the opening modal, click the "Traditional web" section or filter all the available "Traditional web" frameworks using the quick filter checkboxes on the left. Click the "Express" framework card to start creating your application.
3. Enter the application name, e.g., "Bookstore," and click "Create application".

🎉 Ta-da! You just created your first application in Logto. You'll see a congrats page which includes a detailed integration guide. Follow the guide to see what the experience will be in your application.

Integrate Express with Logto​

Installation​

Install Logto SDK via your favorite package manager:

npm i @logto/express cookie-parser express-session

pnpm add @logto/express cookie-parser express-session

yarn add @logto/express cookie-parser express-session

Integration​

Prepare configs and required middlewares​

Prepare configuration for the Logto client:

import { LogtoExpressConfig } from '@logto/express';

const config: LogtoExpressConfig = {
  appId: '<your-application-id>',
  appSecret: '<your-application-secret>',
  endpoint: '<your-logto-endpoint>', // E.g. http://localhost:3001
  baseUrl: '<your-express-app-base-url>', // E.g. http://localhost:3000
};

The SDK requires express-session to be configured in prior.

import cookieParser from 'cookie-parser';
import session from 'express-session';

app.use(cookieParser());
app.use(
  session({
    secret: 'random_session_key', // Replace with your own secret
    cookie: { maxAge: 14 * 24 * 60 * 60 * 1000 }, // In miliseconds
  })
);

Configure redirect URIs​

Before we dive into the details, here's a quick overview of the end-user experience. The sign-in process can be simplified as follows:

1. Your app invokes the sign-in method.
2. The user is redirected to the Logto sign-in page. For native apps, the system browser is opened.
3. The user signs in and is redirected back to your app (configured as the redirect URI).

Configure redirect URIs​

Switch to the application details page of Logto Console. Add a redirect URI http://localhost:3000/callback.

Just like signing in, users should be redirected to Logto for signing out of the shared session. Once finished, it would be great to redirect the user back to your website. For example, add http://localhost:3000/ as the post sign-out redirect URI section.

Then click "Save" to save the changes.

Register routes​

The SDK provides a helper function handleAuthRoutes to register 3 routes:

1. /logto/sign-in: Sign in with Logto.
2. /logto/sign-in-callback: Handle sign-in callback.
3. /logto/sign-out: Sign out with Logto.

Add the following code to your app:

import { handleAuthRoutes } from '@logto/express';

app.use(handleAuthRoutes(config));

Implement sign-in and sign-out​

With the routes registered, now let's implement the sign-in and sign-out buttons in the home page. We need to redirect the user to the sign-in or sign-out route when needed. To help with this, use withLogto to inject authentication status to req.user.

import { withLogto } from '@logto/express';

app.get('/', withLogto(config), (req, res) => {
  res.setHeader('content-type', 'text/html');

  if (req.user.isAuthenticated) {
    res.end(`<div>Hello ${req.user.claims?.sub}, <a href="/logto/sign-out">Sign Out</a></div>`);
  } else {
    res.end('<div><a href="/logto/sign-in">Sign In</a></div>');
  }
});

Checkpoint: Test your application​

Now, you can test your application:

1. Run your application, you will see the sign-in button.
2. Click the sign-in button, the SDK will init the sign-in process and redirect you to the Logto sign-in page.
3. After you signed in, you will be redirected back to your application and see the sign-out button.
4. Click the sign-out button to clear token storage and sign out.

Add Okta enterprise SSO connector​

To simplify access management and gain enterprise-level safeguards for your big clients, connect with Express as a federated identity provider. The Logto enterprise SSO connector helps you establish this connection in minutes by allowing several parameter inputs.

To add an enterprise SSO connector, simply follow these steps:

1. Navigate to Logto console > Enterprise SSO.

2. Click "Add enterprise connector" button and choose your SSO provider type. Choose from prebuilt connectors for Microsoft Entra ID (Azure AD), Google Workspace, and Okta, or create a custom SSO connection using the standard OpenID Connect (OIDC) or SAML protocol.
3. Provide a unique name (e.g., SSO sign-in for Acme Company).

4. Configure the connection with your IdP in the "Connection" tab. Check the guides above for each connector types.

5. Customize the SSO experience and enterprise’s email domain in the "Experience" tab. Users sign in with the SSO-enabled email domain will be redirected to SSO authentication.

6. Save changes.

Set up OIDC application on Okta admin portal​

Step 1: 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.

Click the Next button to continue.

Step 2: Configure the application settings​

1. Provide an 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.

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 the authorization code received from this URI.

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.

Click the Save button to save the application settings.

Step 3: Set up Logto connector with the client credentials​

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

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 4: Additional scopes (Optional)​

Scopes define the permissions your app requests from users and control which data your app can access from their Okta accounts. Requesting additional Okta permissions requires configuration on both sides:

In Okta admin console:

1. Navigate to Applications > Applications and select your OIDC application.
2. Go to the Assignments tab to ensure your app has access to the required users and groups.
3. For custom scopes, navigate to Security > API > Authorization Servers and select your authorization server.
4. Add custom scopes if needed:
   • Click Scopes and then Add Scope
   • Define scope names like okta.users.read or okta.groups.read for accessing Okta APIs
   • Configure consent requirements for each scope

For a complete list of available scopes and their descriptions, please refer to the Okta OIDC documentation.

In Logto Okta connector:

1. Logto automatically includes openid, profile, and email scopes to retrieve basic user identity information. You can leave the Scopes field blank if you only need basic user information.
2. Add offline_access to the Scopes field if you plan to store tokens for persistent API access. This scope enables refresh tokens for long-lived API access.
3. Add additional scopes (separated by spaces) in the Scopes field to request more data from Okta. For example: okta.users.read okta.groups.read

Step 5: Store tokens to access Okta APIs (Optional)​

If you want to access Okta scopes and perform actions with user authorization, Logto needs to get specific scopes and store tokens.

1. Add the required scopes in your Okta developer console API permissions configuration and Logto Okta connector.
2. Enable Store tokens for persistent API access in Logto Okta connector. Logto will securely store Okta access and refresh tokens in the Secret Vault.
3. To ensure refresh tokens are returned, add the offline_access scope to your Okta application permissions and include it in your Logto Okta connector scopes. This scope allows your application to maintain access to resources for extended periods.

Step 6: Set email domains and enable the SSO connector​

Provide the email domains of your organization on Logto's connector SSO experience tab. This will enable the SSO connector as an authentication method for those users.

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

For more details about creating OIDC integration with Okta, please check Create OIDC App Integrations.

Save your configuration​

Double check you have filled out necessary values in the Logto connector configuration area. Click "Save and Done" (or "Save changes") and the Okta enterprise SSO connector should be available now.

Enable Okta enterprise SSO connector in Sign-in Experience​

You don’t need to configure enterprise connectors individually, Logto simplifies SSO integration into your applications with just one click.

1. Navigate to: Console > Sign-in & account > Sign-up and sign-in.
2. Enable the "Enterprise SSO" toggle.
3. Save changes.

Once enabled, a "Single Sign-On" button will appear on your sign-in page. Enterprise users with SSO-enabled email domains can access your services using their enterprise identity providers (IdPs).

To learn more about the SSO user experience, including SP-initiated SSO and IdP-initiated SSO, refer to User flows: Enterprise SSO.

Testing and Validation​

Return to your Express app. You should now be able to sign in with Okta enterprise SSO. Enjoy!

Further readings​

End-user flows: Logto provides a out-of-the-box authentication flows including MFA and enterprise SSO, along with powerful APIs for flexible implementation of account settings, security verification, and multi-tenant experience.

Authorization: Authorization defines the actions a user can do or resources they can access after being authenticated. Explore how to protect your API for native and single-page applications and implement Role-based Access Control (RBAC).

Organizations: Particularly effective in multi-tenant SaaS and B2B apps, the organization feature enable tenant creation, member management, organization-level RBAC, and just-in-time-provisioning.

Customer IAM series Our serial blog posts about Customer (or Consumer) Identity and Access Management, from 101 to advanced topics and beyond.

In this article, we will go through the steps to quickly build the Okta enterprise SSO sign-in experience (user authentication) with Flutter and Logto.

Prerequisites

• A running Logto instance. Check out the introduction page to get started.
• Basic knowledge of Flutter.
• A usable Okta enterprise SSO account.

Create an application in Logto​

Logto is based on OpenID Connect (OIDC) authentication and OAuth 2.0 authorization. It supports federated identity management across multiple applications, commonly called Single Sign-On (SSO).

To create your Native app application, simply follow these steps:

1. Open the Logto Console. In the "Get started" section, click the "View all" link to open the application frameworks list. Alternatively, you can navigate to Logto Console > Applications, and click the "Create application" button.
2. In the opening modal, click the "Native app" section or filter all the available "Native app" frameworks using the quick filter checkboxes on the left. Click the "Flutter" framework card to start creating your application.
3. Enter the application name, e.g., "Bookstore," and click "Create application".

🎉 Ta-da! You just created your first application in Logto. You'll see a congrats page which includes a detailed integration guide. Follow the guide to see what the experience will be in your application.

Integrate Flutter with Logto​

Installation​

flutter pub add logto_dart_sdk

dependencies:
  logto_dart_sdk: ^3.0.0

flutter pub get

git clone https://github.com/logto-io/dart

Dependency and configurations​

SDK version compatibility​

flutter_secure_storage set up​

Under the hood, this SDK uses flutter_secure_storage to implement the cross-platform persistent secure token storage.

• Keychain is used for iOS
• AES encryption is used for Android.

Config Android version​

Set the android:minSdkVersion to >= 18 in your project's android/app/build.gradle file.

  android {
      ...

      defaultConfig {
          ...
          minSdkVersion 18
          ...
      }
  }

Disable auto backup on Android​

By default Android backups data on Google Drive. It can cause exception java.security.InvalidKeyException:Failed to unwrap key. To avoid this,

1. To disable auto backup, go to your app manifest file and set the android:allowBackup and android:fullBackupContent attributes to false.

   AndroidManifest.xml

   <manifest ... >
       ...
       <application
         android:allowBackup="false"
         android:fullBackupContent="false"
         ...
       >
           ...
       </application>
   </manifest>
   
   

2. Exclude sharedprefs from FlutterSecureStorage.

   If you need to keep the android:fullBackupContent for your app rather than disabling it, you can exclude the sharedprefs directory from the backup. See more details in the Android documentation.

   In your AndroidManifest.xml file, add the android:fullBackupContent attribute to the <application> element, as shown in the following example. This attribute points to an XML file that contains backup rules.

   AndroidManifest.xml

   <application ...
     android:fullBackupContent="@xml/backup_rules">
   </application>
   

   Create an XML file called @xml/backup_rules in the res/xml/ directory. In this file, add rules with the <include> and <exclude> elements. The following sample backs up all shared preferences except device.xml:

   @xml/backup_rules

   <?xml version="1.0" encoding="utf-8"?>
   <full-backup-content>
     <exclude domain="sharedpref" path="FlutterSecureStorage"/>
   </full-backup-content>
   

Please check flutter_secure_storage for more details.

flutter_web_auth_2 set up​

Behind the scenes, this SDK uses flutter_web_auth_2 to authenticate users with Logto. This package provides a simple way to authenticate users with Logto using the system webview or browser.

This plugin uses ASWebAuthenticationSession on iOS 12+ and macOS 10.15+, SFAuthenticationSession on iOS 11, Chrome Custom Tabs on Android and opens a new window on Web.

• iOS: No additional setup required

• Android: Register the callback url on Android

  In order to capture the callback url from Logto's sign-in web page, you will need to register your sign-in redirectUri to your AndroidManifest.xml file.

  AndroidManifest.xml

    <manifest>
      <application>
          <activity
            android:name="com.linusu.flutter_web_auth_2.CallbackActivity"
            android:exported="true">
            <intent-filter android:label="flutter_web_auth_2">
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
            <data android:scheme="YOUR_CALLBACK_URL_SCHEME_HERE" />
            </intent-filter>
          </activity>
      </application>
    </manifest>
  

• Web browser: Create an endpoint to handle the callback URL

  If you are using the web platform, you need to create an endpoint to handle the callback URL and send it back to the application using the postMessage API.

  callback.html

  <!doctype html>
  <title>Authentication complete</title>
  <p>Authentication is complete. If this does not happen automatically, please close the window.</p>
  <script>
    function postAuthenticationMessage() {
      const message = {
        'flutter-web-auth-2': window.location.href,
      };
  
      if (window.opener) {
        window.opener.postMessage(message, window.location.origin);
        window.close();
      } else if (window.parent && window.parent !== window) {
        window.parent.postMessage(message, window.location.origin);
      } else {
        localStorage.setItem('flutter-web-auth-2', window.location.href);
        window.close();
      }
    }
  
    postAuthenticationMessage();
  </script>
  

Please check the setup guide in the flutter_web_auth_2 package for more details.

Integration​

Init LogtoClient​

Import the logto_dart_sdk package and initialize the LogtoClient instance at the root of your application.