Implementing a embedded login experience in a React App

[Inayat-C]

Hello,

As the title suggests, I have my own custom UI for a login form so I’ve identified that I can use the embedded login experience to authenticate users.

I’m using the auth0.js library and have managed to get something sort of working with this simple implementation:

const auth = new auth0.WebAuth({
    domain: 'param.domain',
    clientID: 'param.clientid',
    responseType: 'token id_token',
    redirectUri: 'http://localhost:3000',
});

auth.login(
    {
        realm: 'my-custom-db',
        email: userEmail,
        password: userPassword,
    },
);

This seems to somewhat work, I notice that I receive a cookie after successful authentication and also can see the authenticated user in the user tab of the auth0 dashboard.

My questions are:

1. Are there any methods within the library that will help me verify the authentication of the user between page loads in a SPA? How could this potentially be implemented as I wasn’t able to clearly find something in the docs?

2. I noticed that after a successful auth, the redirect uri is appended with some info such as access token and token type. Surely this shouldn’t be exposed in the URL and I’ve noticed that there seems to be a method called parseHash that can help with this but again, unclear through the docs on how to implement.

3. When a new user signs in for the first time, the app is redirected to a screen:

Is there any way around stopping this?

Many thanks!

[dan.woda]

Hi @Inayat-C,

Welcome back!

@Inayat-C

Are there any methods within the library that will help me verify the authentication of the user between page loads in a SPA? How could this potentially be implemented as I wasn’t able to clearly find something in the docs?

Have you looked at the checkSession method?

@Inayat-C

I noticed that after a successful auth, the redirect uri is appended with some info such as access token and token type. Surely this shouldn’t be exposed in the URL and I’ve noticed that there seems to be a method called parseHash that can help with this but again, unclear through the docs on how to implement.

Auth0.js is an older implementation, and we don’t usually recommend using it (or embedded login for that matter).

@Inayat-C

When a new user signs in for the first time, the app is redirected to a screen:

Disable Authorize App Dialogue Box

Question: Disable Authorize App Dialogue Box Answer: Using localhost as your development environment can cause this dialogue box to appear. Consent cannot be skipped on localhost, as it is never a verifiable first-party client. During development, you can work around this by modifying your /etc/hosts file to add an entry such as the following: 127.0.0.1 myapp.example Similarly, you cannot skip consent (even for first-party applications) if localhost appears in any domain in the …

There is a lot of information about most of these topics in the forum (embedded login in particular). You should find plenty of resources by utilizing the search function .