Angular Authentication with OpenID Connect and Okta in 20 Minutes
In this article, you’ll see how build a simple web application with Angular CLI, a tool for Angular development. You’ll also create an application with search and edit features, then add authentication.
Peter Jones
Life saver! Thanks you!!!
Agustin Celentano
Does it works for you?
Peter Jones
Mostly but I have token expiry issues to resolve
Agustin Celentano
Did you have to do extras configurations in the okta web site in order to get connected or just the steps mentioned in the tutorial? I am getting this error:
OAuthError {name: “OAuthError”, message: “The authorization server id is invalid.”
Peter Jones
Oh sorry I’m using identity server
Matt Raible
It works for me! 
What are you using for your issuer value? Here’s what I’m using with my Okta org.
this.oauthService.issuer = ‘https://dev-158606.oktapreview.com/oauth2/default’;The error you’re getting sounds like you’re using something other than the default. You should see a default server under API > Authorization Servers in the Developer Console.
Agustin Celentano
Hey, I could solve that problem. I was using the issuer as “default” when I have a different one. The problem I have now is that I get this error when trying to login
OAuthError {name: “OAuthError”, message: “Policy evaluation failed for this request, please check the policy configurations.”, errorCode: “access_denied”, errorSummary: “Policy evaluation failed for this request, please check the policy configurations.”, __zone_symbol__currentTask: ZoneTask}
errorCode
:
"access_denied"
errorSummary
:
"Policy evaluation failed for this request, please check the policy configurations."
message
:
"Policy evaluation failed for this request, please check the policy configurations."
name
:
"OAuthError"
I check my app in Okta and I have this policy Rule. It seems to be ok. Any other place to check?
https://uploads.disquscdn.c…
Matt Raible
We did a number of optimizations for the default authorization server to create a server, policies, and rules. I’d suggest comparing your default server against the new one you created. If that doesn’t work, please email developers@okta.com to create a support ticket.
Agustin Celentano
The curious thing is that I don’t have a default server, or perhaps it was deleted. I will send a email, hope to get response.
Ankush Chauhan
Hello Sir, I implemented custom login form process in my Angular5 application but I have few problem with Okta session.
I need that If I loggedin with live okta website “https://dev-979342.oktaprev…” and
open my application link in new tab with same broswer than my
application should be auto loggedin with the current session of live
Okta and vice-versa for logout.
I added the following code in my application but it didn’t work:
in app.components.ts:
this.oauthService.redirectUri = ‘http://localhost:4200/callback’;
this.oauthService.clientId = ‘xxxxxxxxxxxxxxxx’;
this.oauthService.scope = ‘openid profile email’;
this.oauthService.issuer = 'https://dev-979342.oktaprev…
this.oauthService.tokenValidationHandler = new JwksValidationHandler();
// Load Discovery Document and then try to login the user
this.oauthService.loadDiscoveryDocument().then(() => {
this.oauthService.tryLogin();
});
import { OAuthService } from ‘angular-oauth2-oidc’;import * as OktaAuth from ‘@okta/okta-auth-js’;
this.authClient = new OktaAuth({
url: ‘https://dev-979342.oktaprev…’,
issuer: ‘default’
});
authClient.session.exists()
.then(function(exists) {
if (exists) {
console.log(‘logged in’)
} else {
console.log(‘not logged in’)
}
});
Matt Raible
Hello Ankush - this happens because angular-oauth2-oidc uses sessionStorage by default. Using sessionStorage means that tokens are only persisted for the current tab, not across tabs (like localStorage does).
It looks like you can override this behavior by calling OAuthService#setStorage() with your own implementation of OAuthStorage that uses localStorage. I’m not sure if there’s an easier way to switch from session to local storage.
Ankush Chauhan
authClient.session.exists()
.then(function(exists) {
if (exists) {
console.log(‘logged in’)
} else {
console.log(‘not logged in’)
}
});
I used this code. When I loggedin in Okta live website(https://dev-979342.oktaprev…) than It console in my application “logged in” and when I logged out from live website than It shows in my application "not logged in " but If I try to redirect on my custom service under session exist than it doesn’t work.
Please see this again
Matt Raible
If you’ve implemented the same example that’s shown in this blog post, I’m happy to help answer your questions. However, it sounds like you’re doing something different. Can you please post your full question to our Developer Forums so we don’t clog up the comments here? If you have a repository on GitHub with your code, that’d be a great help too.
Keith Hill
Great doc, this worked well up until I noticed a timeout issue. If the user is in the application for longer than ~1hour and then he logs out I get redirect to an ugly page…
Is there a mechanism to keep the session token and application token fresh automatically or manually based on expiration?
Matt Raible
To be honest, I expected the angular-oauth2-oidc library to handle this for you. You might try posting an issue in that project or asking this question on Stack Overflow. I’ll send a DM to the library’s maintainer to make him aware of this question.
Megan Dawald
I’m having the same issues with my app. User doesn’t get a refreshed token after an hour and basically gets “logged out” from the current session after that one hour mark.
Manfred Steyer
You can configure silent refresh for this:
This implements the usual solution that aligns with the specs.
Octavio
Awesome post! helped me get our SPA authenticated with Okta… is it true that this type of
app can’t be published to the OIN but only SAML and basic auth based?
