Note: This document is only for Okta Classic Engine. If you are using Okta Identity Engine, see Sign in to SPA with embedded Widget. See Identify your Okta solution (opens new window) to determine your Okta version.
This guide will walk you through integrating authentication into an Angular application with Okta by performing these steps:
Prerequisites
If you do not already have a Developer Edition Account, you can create one at https://developer.okta.com/signup/ (opens new window).
Add an OpenID Connect Client
- Sign in to the Admin Console, and select Create New App.
You can sign in to the Admin Console using https://login.okta.com (opens new window), and then click Admin. - Choose Single Page App (SPA) as the platform, then populate your new OpenID Connect application with values similar to:
Setting | Value |
Application Name | OpenId Connect App (must be unique) |
Login redirect URIs | http://localhost:4200/login/callback |
Logout redirect URIs | http://localhost:4200/login |
Allowed grant types | Authorization Code |
{clientId}
placeholders further in this tutorial should be replaced by the client ID of the created application.
Note: It's important to choose the appropriate application type for public client apps. Failing to do so may result in Okta API endpoints attempting to verify an app's client secret, which public clients are not designed to have, hence breaking the sign-in or sign-out flow.
Create an Angular App
To quickly create an Angular app, we recommend the Angular CLI.
If you need more information, see the Angular CLI installation guide (opens new window).
Install Dependencies
A simple way to add authentication into an Angular app is using the library Okta Sign-In Widget. We can install it via npm
:
To easily interact with the Okta Sign-In Widget, we will also need @okta/okta-angular
(opens new window):
If you're using Angular 6.x, you'll need to install rxjs-compat
:
Create Routes
Some routes require authentication in order to render. Defining these protected routes is easy with the OktaAuthGuard
from @okta/okta-angular
. Let's take a look at what routes are required for this example, using Angular Router (opens new window):
/
: A default page to handle basic control of the app. /protected
: A protected route that can only be accessed by an authenticated user. /login
: A custom sign-in page to handle signing users into your app.
/ - index page
First, update src/app/app.component.html
to provide the login logic, replacing {widgetVersion}
with the latest version (opens new window) of the widget (7.20.1):
Then, update src/app/app.component.ts
to handle the logout()
call:
/protected
This route will only be visible to users with a valid accessToken
or idToken
.
Create a new component src/app/protected.component.ts
:
When a user attempts to access a route that is protected by OktaAuthGuard
, it first checks to see if the user has been authenticated. If isAuthenticated()
returns false
, start the login flow.
/login
This route hosts the Sign-In Widget and redirects if the user is already logged in. If the user is coming from a protected page, they'll be redirected back to the page upon login.
Create a new component src/app/login.component.ts
:
Note: In Okta Sign-In Widget version 7+, Okta Identity Engine is enabled by default. If you are using version 7+ and want to use Okta Classic Engine rather than Identity Engine, you need to specify useClassicEngine: true
in the configuration options (opens new window) passed into the new OktaSignIn()
call.
Connect the Routes
The OktaAuthModule
handles different authentication flows for your application, so it requires your OpenID Connect configuration. By default okta/okta-angular
redirects to the Okta Sign-In Page when the user is not authenticated. We override this behavior by passing an onAuthRequired
function to the OktaAuthGuard
. For more information, see using a custom login-page (opens new window).
Update src/app/app.module.ts
to include your project components and routes. Your completed file should look similar to:
Start your App
Finally, start your application by running:
Conclusion
You have now successfully authenticated with Okta! Now what? 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.