Implementing a embedded login experience in a React App

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!

Hi @Inayat-C,

Welcome back!

Have you looked at the checkSession method? :smiley:

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

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