Get additional data from Universal Login page

[kusi]

On the Universal Login page I added a checkbox for a demo mode. Now I want to pass this information to the auth0 client.

Universal Login page

// https://cdn.auth0.com/js/auth0/9.20.1/auth0.min.js
webAuth.authorize({
  connection: 'google-oauth2',
  demo: true,
  appState: {
    demo: true,
  }
});

Application

// "@auth0/auth0-spa-js": "2.0.3"
await auth0.loginWithPopup();
const user = await auth0.getUser();
// const { demo } = await auth0.getAdditionalParameter('demo'); <= use case

The result i still empty. Can someone help me or give me a hint?

[rueben.tiow]

Hi @kusi,

Welcome to the Auth0 Community!

To better understand the situation, could you please clarify what you expect the result to be?

And could you please explain your use case in more detail?

Let me add that demo and appState are not acceptable parameters for the webAuth.authorize function. See here for the list of callable parameters.

I am looking forward to your reply.

Thanks,
Rueben

[kusi]

Hi @rueben.tiow

I would like to build a auth0 login page (Universal Login) with three social login buttons and a checkbox for enabling/disabling a demo mode. In my SPA I would like to get this information (just a boolean value) from the auth0 client.

Regards
Kusi

[kusi]

[kusi]

Hi @rueben.tiow

I found a workaround to pass the demo flag back to my SPA. These are the following steps for my use case:

1. Show Universal Login page with loginWithPopup. (line 6)

2. User choose between demo mode on/off.

3. Send demo flag back to SPA. (line 9)

4. Forward to the social provider. (line 11)

5. Get user data from auth0 client. (line 7)

SPA

1 // "@auth0/auth0-spa-js": "2.0.3"

2 window.addEventListener('message', (event) => {

3 console.log(event.data.demo);

4 }, false);

5

6 await auth0.loginWithPopup();

7 const user = await auth0.getUser();

Universal Login

8 // https://cdn.auth0.com/js/auth0/9.20.1/auth0.min.js

9 window.opener.postMessage({demo: true}, "http://localhost:4200");

10

11 webAuth.authorize({

12 connection: 'google-oauth2'

13 });

My prefered way would be to pass the demo flag throuth the auth0 client.

Regards

Kusi

[rueben.tiow]

Hi @kusi,

Thank you for your responses and clarification.

@kusi

Universal Login page

// https://cdn.auth0.com/js/auth0/9.20.1/auth0.min.js
webAuth.authorize({
  connection: 'google-oauth2',
  demo: true,
  appState: {
    demo: true,
  }
});

Application

// "@auth0/auth0-spa-js": "2.0.3"
await auth0.loginWithPopup();
const user = await auth0.getUser();
// const { demo } = await auth0.getAdditionalParameter('demo'); <= use case

I have collaborated with my colleagues on this and can confirm that you can pass the appState parameter in webAuth.authorize(). (Reference: JSDoc: Source: web-auth/index.js)

Now to get the appState back on your App, you can call the auth0-spa-js Auth0Client - handleRedirectCallback method to get the appState value back.

Could you please give this a try and let me know how it goes?

Thanks,
Rueben

[kusi]

Hi @rueben.tiow

Your solution will work if the method loginWithRedirect is used. But I would like to use the method loginWithPopup.

I changed my concept and moved the demo checkbox to my SPA. You can close this ticket as far as I’m concerned.

Thanks for your help.
Kusi