Sign in to your SPA with the embedded Okta Sign-In Widget

Identity Engine

Instructions for

Angular

Loading...

Note: This document is only for Identity Engine. See Identify your Okta solution (opens new window) to determine your Okta version.

This guide explains how to sign in to an Angular framework single-page application (SPA) with the embedded Okta Sign-In Widget.

---

Learning outcomes

• Understand how to implement a sign-in use case using Angular and the Okta Sign-In Widget.
• Understand basic installation and code configurations using Angular.
• Implement a simple SPA use-case, and sign a user in to the app.

What you need

• Okta Developer Edition organization
• Basic knowledge of building Angular apps

Sample code

Okta Angular + Custom Login Example (opens new window)

---

About using the Sign-In Widget with your SPA app

The embedded Okta Sign-In Widget provides user authentication, and an opportunity to customize the sign-in experience for your Angular app.

This guide explains how to build a sample app with the embedded Sign-In Widget that's included in the okta/samples-js-angular (opens new window) repository. It also reviews code snippets that you can use for your Angular app's authentication needs. The sample app uses the embedded widget to sign in to a simple web page that provides details on the user signed in.

Note: This sample app references Angular CLI v14.2.0, okta-sign-in-widget v7.14.0, and okta-auth-js v7.0.2. It was most recently tested against Angular CLI v18.2.7 and Node v20.11.1

Create an Okta app integration

Before you integrate Okta authentication to your app, register your app in your Okta org. This provides you with the OpenID Connect client ID for authentication requests from your app. Register your app by creating an Okta app integration through the Okta CLI (opens new window), the Okta Apps API (opens new window), or through the Admin Console with the following steps.

1. In the Admin Console, go to Applications > Applications.

2. Click Create App Integration.

3. Select OIDC - OpenID Connect as the Sign-in method.

4. Select Single-Page Application for the Application Type, and then click Next.

5. On the New Single-Page App Integration page:

   • Enter an application name.

   • Select the Refresh Token checkbox.

   • Select Advanced in the Grant type section, and then select the Interaction Code checkbox.

     Note: If the Interaction Code checkbox doesn’t appear, the Interaction Code grant type isn’t enabled for your org. To enable it, go to Settings > Account > Embedded widget sign-in support. See Verify that the Interaction Code grant type is enabled.

   • Set Sign-in redirect URIs to a URI that is appropriate for your app. For example, http://localhost:8080/login/callback if you're using the sample app.

   • Set Sign-out redirect URIs to a URI that is appropriate for your app. For example, http://localhost:8080 if you're using the sample app.

6. In the Assignments section, select Allow everyone in your organization to access, and click Save.

7. In the General Settings section on the General tab, click Edit.

8. Under EMAIL VERIFICATION EXPERIENCE set Callback URI to a URI that is appropriate for your app. For example, http://localhost:8080/login/callback if you're using the sample app.

9. Click Save.

10. Select the Sign On tab and scroll down to the User authentication section. New apps are automatically assigned the shared default authentication policy (opens new window). This policy has a catch-all rule that allows a user access to the app using either one or two factors, depending on your org setup.

11. For this use case, we want to use only the password factor. Click Edit and select the Password only preset policy (opens new window) to assign it to your app.

12. Click Save.

    Note: Be sure to also update the password authenticator policy rule to not require any additional verification.

13. In the Security > API > Authorization Servers section, verify that the custom authorization server uses the Interaction Code grant type by selecting the default server, clicking Access Policies, and then editing the Default Policy Rule. Click Advanced in the IF Grant type is section to ensure that the Interaction Code checkbox is selected.

    Note: If the Interaction Code checkbox doesn’t appear, the Interaction Code grant type isn’t enabled for your org. To enable it, go to Settings > Account > Embedded widget sign-in support. See Verify that the Interaction Code grant type is enabled.

14. In the Security > API > Trusted Origins page, ensure that there is an entry for your sign-in redirect URI. See Enable CORS.

Okta org app integration configuration settings

You need two pieces of information from your org and app integration for your React app:

• Client ID: From the General tab of your app integration, save the generated Client ID value.
• Issuer: From the General tab of your app integration, save the Okta domain value. Use your Okta domain value for the issuer setting that represents the authorization server. Use https://{yourOktaDomain}/oauth2/default as the issuer for your app if you're using an Okta Developer Edition org. See Issuer configuration if you want to use another Okta custom authorization server.

Install the SDK

1. In your project folder, download the sample app from the GitHub repository and go to the custom-login folder.

   git clone https://github.com/okta/samples-js-angular.git
   cd samples-js-angular/custom-login
   

2. In the custom-login folder, install the dependencies:

   npm install
   

3. Ensure that you're using the Angular version and node version designed for this sample app.

   node --version
   

   ng --version
   

4. Install the following version of okta-auth-js:

   npm install @okta/okta-auth-js@latest
   

5. Go to the samples-js-angular folder and create a configuration file calledtestenv (no extension).

   Note: You may need to install the dotenv package if not already installed (npm install dotenv).

6. Populate the testenv file with the following parameters and values from your app integration created in the previous section:

   ISSUER=https:////{yourOktaDomain.com}/oauth2/default
   CLIENT_ID={Client ID value from app integration}
   USE_INTERACTION_CODE=true
   

Load the Sign-In Widget

The first step for any application is to install or embed the widget. Best practice is to install locally through a package manager (for example, npm) for better performance and testing purposes.

npm

To install the latest version of the Okta Sign-In Widget (opens new window) locally through npm, run the following command in your project root folder:

npm install @okta/okta-signin-widget@latest

See also Using the npm module (opens new window). The latest version of the widget is 7.25.1.

Add styles

To add or customize application styles, you need to update the angular.json config file. You can do so manually or at the terminal.

Terminal

Run the following command. This replaces all existing styles, so you need to add any existing style files to this command.

ng config projects.okta-signin-test.architect.build.options.styles '["src/styles.css", "./node_modules/@okta/okta-signin-widget/dist/css/okta-sign-in.min.css"]'

Angular.json

Add the styles manually by opening src/angular.json, and updating projects.custom-login.architect.options. When complete, the configuration appears as follows:

"options": {
            "outputPath": "dist/custom-login",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "./node_modules/@okta/okta-signin-widget/dist/css/okta-sign-in.min.css"
            ],
            "scripts": []
          },

Sample application code

The sample application adds the Okta Sign-In Widget in the apps.module.ts file:

providers: [
    {
      provide: OKTA_CONFIG,
      useFactory: () => {
        const oktaAuth = new OktaAuth(config.oidc);
        return {
          oktaAuth,
          onAuthRequired: (oktaAuth: OktaAuth, injector: Injector) => {
            const router = injector.get(Router);
            // Redirect the user to your custom login page
            router.navigate(['/login']);
          }
        }
      }
    },
    { provide: APP_BASE_HREF, useValue: environment.appBaseHref },
  ]

The Sign-In Widget is instantiated in the login.components.ts file:

import { Component, OnInit } from '@angular/core';
import { OktaAuth, Tokens } from '@okta/okta-auth-js';

// @ts-ignore
import * as OktaSignIn from '@okta/okta-signin-widget';
import sampleConfig from '../app.config';

const DEFAULT_ORIGINAL_URI = window.location.origin;

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  signIn: any;
  constructor(public oktaAuth: OktaAuth) {
    this.signIn = new OktaSignIn({
      /**
       * Note: when using the Sign-In Widget for an OIDC flow, you still
       * need to configure the base URL for your Okta Org. Here
       * we derive it from the given issuer for convenience.
       */
      baseUrl: sampleConfig.oidc.issuer.split('/oauth2')[0],
      clientId: sampleConfig.oidc.clientId,
      redirectUri: sampleConfig.oidc.redirectUri,
      logo: 'assets/angular.svg',
      i18n: {
        en: {
          'primaryauth.title': 'Sign in to Angular & Company',
        },
      },
      authClient: oktaAuth,
    });
  }

  ngOnInit() {
    // When navigating to a protected route, the route path is saved as the `originalUri`
    // If no `originalUri` has been saved, then redirect back to the app root
    const originalUri = this.oktaAuth.getOriginalUri();
    if (!originalUri || originalUri === DEFAULT_ORIGINAL_URI) {
      this.oktaAuth.setOriginalUri('/');
    }

    // Search for URL Parameters to see if a user is being routed to the application to recover password
    var searchParams = new URL(window.location.href).searchParams;
    this.signIn.otp = searchParams.get('otp');
    this.signIn.state = searchParams.get('state');

    this.signIn.showSignInToGetTokens({
      el: '#sign-in-widget',
      scopes: sampleConfig.oidc.scopes
    }).then((tokens: Tokens) => {
      // Remove the widget
      this.signIn.remove();

      // In this flow the redirect to Okta occurs in a hidden iframe
      this.oktaAuth.handleLoginRedirect(tokens);
    }).catch((err: any) => {
      // Typically due to misconfiguration
      throw err;
    });
  }

  ngOnDestroy() {
    this.signIn.remove();
  }
}

And references the Okta app configuration information in app.config.js or in the env.js and the testenv files:

// Read environment variables from "testenv" in the repository root.
// Override environment vars if they are already set.
const path = require('path');
const dotenv = require('dotenv');
const fs = require('fs');

const TESTENV = path.resolve(__dirname, 'testenv');
if (fs.existsSync(TESTENV)) {
  const envConfig = dotenv.parse(fs.readFileSync(TESTENV));
  Object.keys(envConfig).forEach((k) => {
    process.env[k] = envConfig[k];
  });
}
process.env.CLIENT_ID = process.env.CLIENT_ID || process.env.SPA_CLIENT_ID;
process.env.USE_INTERACTION_CODE = process.env.USE_INTERACTION_CODE || false;

Important: In Okta Sign-In Widget version 7+, Identity Engine is enabled by default. If you’re using an earlier version than 7, you must explicitly enable Identity Engine features by setting useInteractionCodeFlow: sampleConfig.widget.useInteractionCodeFlow === 'true' inside the OktaSignIn() constructor call shown in the previous example. If you’re using version 7+ and you want to use Okta Classic Engine rather than Identity Engine, specify useClassicEngine: sampleConfig.widget.useClassicEngine === 'true' in the OktaSignIn() constructor call.

Basic sign-in flow

The following sample application code renders the Sign-In Widget and after a successful authentication receives an object with OAuth tokens. From the login.components.ts file:

ngOnInit() {
    // When navigating to a protected route, the route path is saved as the `originalUri`
    // If no `originalUri` is saved, then redirect back to the app root
    const originalUri = this.oktaAuth.getOriginalUri();
    if (!originalUri || originalUri === DEFAULT_ORIGINAL_URI) {
      this.oktaAuth.setOriginalUri('/');
    }

    this.signIn.showSignInToGetTokens({
      el: '#sign-in-widget',
      scopes: sampleConfig.oidc.scopes
    }).then((tokens: Tokens) => {
      // Remove the widget
      this.signIn.remove();

      // In this flow the redirect to Okta occurs in a hidden iframe
      this.oktaAuth.handleLoginRedirect(tokens);
    }).catch((err: any) => {
      // Typically due to misconfiguration
      throw err;
    });
  }

The following sample application code in the home.component.ts file retrieves the user information from the ID token:

async ngOnInit() {
    const isAuthenticated = await this.oktaAuth.isAuthenticated();
    if (isAuthenticated) {
      const userClaims = await this.oktaAuth.getUser();
      this.userName = userClaims.name as string;
    }
  }

And displays the user's name on the Custom Login Page after you sign in.

Routes

Some application routes require authentication to render. Define these protected routes with the OktaAuthGuard (opens new window) method from the @okta/okta-angular SDK. For example, in the sample application, the Profile page is protected using this method:

import {
  OKTA_CONFIG,
  OktaAuthGuard,
  OktaAuthModule,
  OktaCallbackComponent,
} from '@okta/okta-angular';

...

const appRoutes: Routes = [
  {
    path: '',
    component: HomeComponent,
  },
  {
    path: 'login/callback',
    component: OktaCallbackComponent,
  },
  {
    path: 'login',
    component: LoginComponent,
  },
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate: [ OktaAuthGuard ],
  },
  {
    path: 'messages',
    component: MessagesComponent,
    canActivate: [ OktaAuthGuard ],
  },
];

Run the sample application

Run the sample application to see the rendering of the Sign-In Widget and authentication flow.

1. From the custom-login folder, run the sample application:

   ng serve
   

2. After a successful compilation, navigate to http://localhost:8080. The Custom Login with Sign-In Widget page appears.

3. Click Login and enter credentials for a user assigned to your app integration. The Custom Login with Sign-In Widget returns with the user's email address.

4. Click the Profile tab to view claim information returned with the ID token.

Next steps

You have now successfully authenticated with Okta. With a user's id_token, you have basic claims for the user's identity. You can extend the set of claims by modifying the scopes to retrieve custom information about the user. This includes locale, address, groups, and more (opens new window).

See also

• Sign users in to your SPA using the redirect model
• okta-auth-js (opens new window)
• okta-signin-widget (opens new window)
• okta-angular (opens new window)
• Blog post by Holger Schmitz, Build a Beautiful App + Login with Angular Material (opens new window)