Build a Beautiful App + Login with Angular Material

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?

Matt Raible

Here’s a tutorial that might help: Build User Registration with Node, React, and Okta.

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/… :slight_smile:

Shtalma

Great tutorial, finally understand each point of authenticating. :slight_smile:

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. :slight_smile: