auth0 / auth0-spa-js

Auth0 authentication for Single Page Applications (SPA) with PKCE
MIT License
903 stars 357 forks source link

Custom Params #191

Closed ChaudhryAtif closed 4 years ago

ChaudhryAtif commented 5 years ago

I see this PR: https://github.com/auth0/auth0-spa-js/pull/146

How can I put this into practice? I want to customize the Universal Login UI. For example, change to username-password login, disable sign up, disable forgot password, etc.

The interface detail for Auth0ClientOptions says:

If you need to send custom parameters to the Authorization Server, make sure to use the original parameter name.

I tried the following, but didn't work:

createAuth0Client({
    domain: '',
    client_id: '',
    redirect_uri: '',
    audience: '',

    autofocus: true,
    usernameStyle: 'username',
    requires_username: true,
    allowSignUp: false,
    rememberLastLogin: false,
    allowForgotPassword: false,
    sso: false
})
BitPhoenix commented 4 years ago

@ChaudhryAtif

I got this working for my use case (show signup first instead of login) by adding the keys into the Auth0ClientOptions object like you did above (step 1) and then (step 2): customizing the Universal Login page in auth0 management console with custom javascript. If you log in to auth0 and look on the left sidebar, you'll see "Universal Login." Then click "Customize Login Page" toggle to enable the ability to edit the default javascript.

This is how I got the Universal Login to open to sign up by default (this example can be used to apply to all desired keys):

// Available Lock configuration options: https://auth0.com/docs/libraries/lock/v11/configuration var lock = new Auth0Lock(config.clientID, config.auth0Domain, { initialScreen: config.extraParams.initialScreen || 'login', ... });

I think the sdk is properly sending over the extra params to auth0, but the Universal Login page does not look for these extraParams and apply them to the Auth0Lock object it creates by default. Doing this explicitly myself (customizing the javascript in the Login page) successfully lead to the desired Universal Login behavior (opening to signup instead of login).

ChaudhryAtif commented 4 years ago

@kodezen Thanks for the reply. I haven't tried it yet, but you are using Auth0Lock, whereas I am using the default/new implementation provided by auth0-spa-js (see constructor above).

Do you know if your changes will work for the updated implementation too?

stevehobbsdev commented 4 years ago

@ChaudhryAtif Yes, @kodezen is referring to the custom JavaScript you can write in order to configure Auth0Lock from the Auth0 management dashboard. This SDK provides no UI, rather it redirects the user to our Universal Login page, which in turn uses Lock.

For more information on customization of the login page, this article should help.