Build an Angular App with Okta’s Sign-In Widget in 15 Minutes
In this article, you’ll learn how to get started with Angular, and add user authentication with Okta’s Sign-In Widget.
Amey Pelapkar
Hi Matt,
Could you please answer below questions?
1. How I can get user info?
2. How I can claim user’s group? I have set up group claim at “OpenID Connect ID Token” in okta
like
Groups claim type Filter
Groups claim filter : groupsRegex .*
I am able to claim groups if it is configured at “Authorization Servers” like response.claims.groups
But not able to claim if it is configured as group claim filter under section OpenID Connect ID Token
Matt Raible
Hello Amey,
The ability to retrieve user info is coming in the next Widget release, slated for the end of this month. This will extend all of AuthJS’s functionality (including token.getUserInfo()). As of today, this isn’t available in the Widget, so you’ll need to import AuthJS to handle that.
To look at claims, you can use the tokenManager.get(‘accessToken or idToken’) method, which will return a JSON object containing the token claims. You will need to verify the expected group is contained in the group scope yourself.
Hope this helps!
Amey Pelapkar
Thanks Matt !!
I tried with okta authjs also but did not work, please see below sample code.
<script src=“https://ok1static.oktacdn.c…” type=“text/javascript”></script>
<body>
<script>
// Bootstrap the AuthJS Client
var authClient = new OktaAuth({
// Org URL
url: ‘https://dev-958447.oktaprev…’,
// OpenID Connect APP Client ID
clientId: ‘0oaex6vtkmb9lTxX908hj’,
// Trusted Origin Redirect URI
redirectUri: ‘http://localhost:4200/’
});
// Attempt to retrieve ID Token from Token Manager
var idToken = authClient.tokenManager.get(‘idToken’);
var token = authClient.tokenManager.get(‘token’);
// If ID Token exists, return it in console.log
if (idToken) {
console.log(hi ${<a href="http://idToken.claims.email" rel="nofollow noopener" title="idToken.claims.email">idToken.claims.email</a>}!);
// If ID Token isn’t found, try to parse it from the current URL
} else if (location.hash) {
authClient.token.parseFromUrl()
.then(token => {
// Store parsed token in Token Manager
authClient.tokenManager.add(‘idToken’, token[0]);
authClient.tokenManager.add(‘token’, token[1]);
//console.log(token[0]);
//console.log(token[1]);
authClient.token.getUserInfo(token[1]).then(response => {
console.log(response);
});
});
} else {
// You’re not logged in, you need a sessionToken
var username = ‘**.com’;
var password = '’;
authClient.signIn({username, password})
.then(res => {
if (res.status === ‘SUCCESS’) {
authClient.token.getWithRedirect({
sessionToken: res.sessionToken,
responseType: [‘id_token’,‘token’]
});
}
});
}
</script>
</body>
https://uploads.disquscdn.c…
Matt Raible
Hello Amey,
The Okta Auth SDK is meant to be used with a login form that you create. My Angular Authentication with OpenID Connect and Okta in 20 Minutes post shows you how to do that.
Amey Pelapkar
Thanks Matt!! I will go through it.
Regards,
Amey
Wayne Carson
Hi Matt,
Thanks for the informative article. Running into this issue I hope you can provide some guidance on:
If we render the login page, the widget renders and works fine. If we navigate away to another angular route, and then come back to the login page, the widget is gone. Does showLogin() have to be triggered again by something?
Matt Raible
The following line removes the widget:
this.oktaSignIn.remove();If you’re rendering the widget on a dedicated route, you might not need that line.
Steven Chou
Hi Matt,
I’ve tried out several Okta provided sample app including this one and the other one with Okta Angular SDK with sign-in widget. However, one thing that I don’t understand is the difference between them and what actually happens under the hood. When I tried the sample code on this blog post, I can see that once I logged in on one tab, other new tab I opened later would automatically log me in and I think it’s because the code always check if the session is active by calling /api/v1/sessions/me in the background (however, I never seen any cookie get set at Chrome dev tool after I logged in, so I’m curious how it sets the cookie) This behavior is exactly what I want because I want to avoid user log-in if there is any active SSO session.
However, when I tried other sample using Okta Angular SDK, its API is quite different. How the OktaAuthService determines if user is logged in is by only checking the existence of the ID token at local storage (isAuthenticated()). That means if I already logged in at some other device then I will need to log in again. So my question is that if Okta Angular SDK shouldn’t be used at SSO sessiion scenario, how should we check if the session is still active or user is still logged in when the user navigates to different route or does anything triggered the HTTP request? Checking remote session at every route guard and HTTP request doesn’t seem to be the right direction.
Robert Damphousse
Hi Matt, great question. You’re right, there are two ways to “know if the user is logged in”. You can consider the Okta session (using the sessions endpoint), or you can look at the ID token expiration. Which one to use depends on your use case. In our samples we chose the ID token because it scopes authorization to the specific application that has asked for the tokens (bound by the client ID of the application, which you’ll see as a claim in the tokens), whereas the Okta session is not application specific (you could use the Okta session to single-sign-on into other applications). In the end it just depends on what kind of authorization and access control that you need. Hope this helps!
Sk78
Hi Matt,
Thanks for the article.
Matt My company is migration our authentication system to Okta.
I’m in charge of a SPA (angular) so your article is very informative.
We are having an issue with your approach.
The call to the method session.get is returning an error if the Third party cookies are disabled( Safari by default).
Error: {“errorCode”:“E0000007”,“errorSummary”:“Not found: Resource not found: me (Session)”,“errorLink”:“E0000007”,“errorId”:“oaegLKbsDwSTyq7LjprGCxftQ”,“errorCauses”:}
Could you please help me to find an approach to make it work.
Our process is simple, we want to use the Widget to sign in, get the access token. Share this access token with every call to our API, so our API can verify the access.
We also want to keep the token alive in our client while the customer is using the application, even if he close the page and came back before the session expiration.
Is there any recommendation? I was reading several forums and I cant find a working solution with the Third Party Cookies disabled.
Thank you for your time!
Matt Raible
Can you please post your question to the Okta Developer Forums? I’m on vacation for the next couple of weeks, so I’m trying not to work. 
Veda Gangatkar
Hi Matt,
Sign-in widget comes up with a textbox instead of a form. Can you please look into it. https://uploads.disquscdn.c…
Matt Raible
If you refresh your browser, does it solve the issue? If so, I believe you need to use ChangeDetectorRef as recommended in this tutorial.
Veda Gangatkar
It doesn’t solve the issue after refreshing the browser and I followed all the steps in the tutorial including ChangeDetectorRef. As far as I know, the form present in the sign-in widget is not getting loaded and auth-footer as well. What do you think the issue may be?
I am using angular 5 in my project and Will that be an issue?
Matt Raible
Does your developer console have any errors in it?
Veda Gangatkar
Nope. I am not able to figure it out whats causing the issue.And Is it something to do with angular version?
Matt Raible
Can you try using the same versions of libraries I used in this tutorial?
Veda Gangatkar
Yes , it works with the same versions of libraries provided in the tutorial.
But my project is in Angular 5 and I don’t want to upgrade it to angular 6 since its a big project and leads to a big change. Is it any other way to make it work with Angular 5 ?
Matt Raible
There’s a changelog at the end of this blog post that has links to what changed when I upgraded to Angular 6. Maybe you can use that diff to figure out how to change back to Angular 5? You could also check out the git commit before I did the upgrade.