Authentication using existing UI

[Inayat-C]

Hi,

First of all sorry if this question has been answered before, i’m sure you get many variations of this same question but i couldn’t find an answer for myself.

At the moment, my SPA sends a request to my node backend, which authenticates the user and sends a http only secure cookie back to my client. I’m looking to delegate my authentication flow to a provider like Auth0 so i don’t have to worry about security etc as i’m concerned that my auth method is not the most secure. However my App already has a great UI for user sign up and logins.

After searching, i figured that the Authentication API is what i need.

But this is where my confusion begins. In the docs, specifically under the login section, there’s 3 choices.

Social - It will return a 302 redirect to the social provider specified in connection.
Database - It returns a 302 redirect to the Auth0 Login Page that will show the Login Widget where the user can login with email and password.
Enterprise - It returns a 302 redirect to the SAML Provider

None of these login endpoints seem to provide what i need, it seems as though they all redirect to their own specific login widgets in order to authenticate.

My ideal authentication flow would be:

1. User registers for an account on my App. Credentials are securely stored in my database and/or Auth0?.
2. User signs in to the app (SPA), Auth0 handles secure authentication via a request which returns a response that can determine wether the sign in was successful / unsuccessful.

Any help pointing me to the right direction would be greatly appreciated!

Thanks.

[colin.coutts]

Hi @Inayat-C and welcome to Auth0 Community!!

I’ll try and answer your questions below:

@Inayat-C

User registers for an account on my App. Credentials are securely stored in my database and/or Auth0?.

This can be done by using Auth0 Custom DB’s which you can use to serve as a representation of your own Database. You can either choose to use your database for authentication or do a migration of your user’s into Auth0.

@Inayat-C

User signs in to the app (SPA), Auth0 handles secure authentication via a request which returns a response that can determine wether the sign in was successful / unsuccessful.

The above suggestion would ideally leverage the Universal Login where your user’s would input their credentials. If you’re concerned about your existing login UI, you may be able to customize Auth0’s universal login to bring it in parallel to your existing UI (there are some limitations to this potentially but depend on your particular UI design). Here’s a community post where Konrad has outlined a lot of the documentation surrounding this topic and would be helpful when planning your own UI customizations.

How do I implement a custom UI Login instead of using lock?

Are there any tutorials that could help me for a React app custom login. Do I use the custom template from the hosted pages and copy my code from there and put it into my react app or do I use the web sdk and how hard is it to implement. Thanks in advance

Hope those resources prove helpful, let us know if you have any further concerns!

Best,
Colin