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:
if I’m using Auth0-lock in short its called embedded form not the default universal. correct?
Can we mix universal and Auth0-lock?
How to properly redirect after login / sign up authenticated? - On auth0-lock docs we can initializing our Auth0Lock and dashboard
How to properly protect URL route with Auth0-lock?
on auth0-react we can achieve this with import { withAuthenticationRequired } from '@auth0/auth0-react';
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"
}]
});
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.