Build a Beautiful App + Login with Angular Material
This tutorial shows you how to build a beautiful login form with Angular Material.
Lucas Lopes
Awesome!
Swavek Lorenc
Finally a good example of how to use Angular with Angular Material to build login page. Could you enhance this example to show how to register new users? I want to build SPA web application and use my own login/register pages built with Angular Material so they look the same as the rest of the application.
Matt Raible
We could probably write a new tutorial that shows you how to do this with Okta and our APIs. Are you currently using Okta?
Swavek Lorenc
Yes I am using Okta. I have been trying to get it to work and I was able to use your API to register users from the server side, but I can’t log them in afterwards. I can’t convert sessionToken I get from authn endpoint into accessToken. All the different flows are confusing. I would like to use the JavaScript libraries so I can do it completely from the client side and maintain the look and feel of the application. I want to be able to validate the email address and also cell phone number. The app is a mobile/desktop website.
Matt Raible
It is not possible at this point to register a user client-side. The reason is because you’d need an API Token and you wouldn’t want to store that value in your client code. We recommend that you create a registration endpoint in a server-side app that calls our /users endpoint.
Brian Sperryn
Hi Matt, would it be possible to show how this works? What would the final outcome be like?
Brian Sperryn
Thanks Matt, I’ve been out the Java game for a little while and I’m so excited to see that although Appfuse’s time had passed, it was reborn as JHipster! Great work, I’m a real fan!
Alex Mills
an explanation for npm install -E the -E flag would be nice
Matt Raible
If you use -E, it’ll install the exact version. It’s a shortcut for --save-exact. We use it because we find things often break, even between minor version. Because semantic versioning. https://developer.okta.com/… 
Shtalma
Great tutorial, finally understand each point of authenticating.
I have one question about how to check login credentials (user, pass) with credentials from DB after authenticating? Simplier, how to do classic login after authenticating? App stack is Angular 7, NodeJS and MySQL database.
Thanks so much in advance.
Matt Raible
Friends don’t let friends use classic login. Just use OAuth.
Getting a strange behavior, after implementing this on an asp.net core / angular application.
I always get redirected at the GUARDED page, instantly.
When logging out, I get redirected to the loginpage for a split second, before getting redirected to the guarded page again (which should not be visible without being logged in).
Any idea what could cause this? Been checking and trying for hours now. 
Do you see anything in your browser’s developer console? Can you try in an incognito window and see if that helps?
After quite a few more hours I found the issue by accident kind of. I triggered the Logout function via an “a” tag, rather than a button. Silly of me.
Now I just need to find out how to get the user name and other claims with this new Angular 13 version. All the guides for that seem dated or don’t work with this example code.
We keep this sample up-to-date:
You can install the Okta CLI and run okta start angular to try it.
1 Like
Can anyone help me? I followed all the steps of this example, but at the moment I log in for a second and it instantly logs me out
You might try cloning the example repo and following the instructions in its README to set things up.
Please let me know if this doesn’t work.
Its not working. I cloned the repo today and for a split second takes me to login and the to app.
I registed Okta using Google and added new users to the app. I used the new users to login. I t logged me in but for a split second took me back to login screen and then to app.
Please suggest what to be done