Auth0 the confusing part - for me

Get Help
, , ,
1

Hello Community,

I feel like I have misunderstood and confused some areas about auth0-lock, auth0-react and default universal login.
Auth0 has default universal login (classic and new ) with limitation. if you add to add additional custom fields on sign up then you need to use Auth0-lock or custom sign up form with limitation.

Questions:

  1. if I’m using Auth0-lock in short its called embedded form not the default universal. correct?
  2. Can we mix universal and Auth0-lock?
  3. How to properly redirect after login / sign up authenticated? - On auth0-lock docs we can initializing our Auth0Lock and dashboard
  4. How to properly protect URL route with Auth0-lock?
  • on auth0-react we can achieve this with import { withAuthenticationRequired } from '@auth0/auth0-react';
3

Hi @ifStuckAsk,

You can use the Classic Universal Login with Lock. This is recommended over using an embedded login. Centralized Universal Login vs. Embedded Login

To do this, go to the Universal Login settings in your Auth0 dashboard and select Classic Experience and click “SAVE CHANGES” at the bottom of the page.

Go to the “Login” tab and enable “Customize Login Page”. Select “Lock” from the DEFAULT TEMPLATES dropdown.

You can add additional signup fields and other customizations inside the Auth0Lock options.

    // Available Lock configuration options: https://auth0.com/docs/libraries/lock/v11/configuration
    var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
      // ... other configs
     additionalSignUpFields: [{
       name: "address",
       placeholder: "enter your address",
       // The following properties are optional
       icon: "https://example.com/assests/address_icon.png",
       prefill: "street 123",
       validator: function(address) {
         return {
            valid: address.length >= 10,
            hint: "Must have 10 or more chars" // optional
        };
       }
     },
    {
       name: "full_name",
       placeholder: "Enter your full name"
     }]
    });

https://auth0.com/docs/libraries/lock/lock-configuration?_ga=2.108206343.409550726.1613909074-1595415333.1607347674#additionalsignupfields-array-

You can use auth0-react in the same way as you are currently with withAuthenticationRequired

4

Hi @stephanie.chamblee

Thank you for response it helps me a lot.

Go to the “Login” tab and enable “Customize Login Page”. Select “Lock” from the DEFAULT TEMPLATES dropdown.

You can add additional signup fields and other customizations inside the Auth0Lock options

In short no need to install auth0-lock locally?

5

That’s right! You can use the hosted Universal Login page. This is actually recommended over embedding your own login due to the complications of cross-origin authentication.

6

Hi @stephanie.chamblee once again thank you.