I would like to make my application a private beta that only authorized people can access. I would like to do this with a “beta code,” for example, in addition to an email and password (on sign-up,) there also being a “Code” input. Can I do this with Auth0? If so, how?
Hi @lerichardson,
Welcome to the Community!
You could add a custom login field for the beta code and then validate it in a pre-user registration action.
To do this, you could use the Classic Login Experience with Lock and add an additional signup field:
- Go to your Auth0 dashboard > Branding > Universal Login. Select Classic and save.
- Go to the Login tab and enable the Customize Login Page toggle. Select the Lock template from the Default Templates dropdown. Add the signup field to the lock configs:
additionalSignUpFields: [{
name: "beta_code",
placeholder: "enter the beta code",
// The following properties are optional
icon: "https://example.com/assests/address_icon.png",
validator: function(address) {
return {
valid: address.length >= 10,
hint: "Must have 10 or more chars" // optional
};
}
Next, you can create a pre-user registration action to check this field (note: be sure to dd the action to the flow once it is deployed):
exports.onExecutePreUserRegistration = async (event, api) => {
const betaCode = 'abc123';
const validBetaCode = (event.user.user_metadata || {}).beta_code === betaCode;
if (!validBetaCode) {
api.access.deny('invalid_beta_code', "User cannot be created");
}
};
1 Like
I’m having some trouble with Lock.js. How do I add the additionalSignUpFields item? Should I turn it into a variable? If so, how do I add it to var lock = new Auth0Lock(config.clientID, config.auth0Domain ...?
Hi @lerichardson,
You could store it in a variable. You can add the additional signup fields after the last item in the lock config object. Here is what my full template looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sign In with Auth0</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
</head>
<body>
<!--[if IE 8]>
<script src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.5/ie8.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="https://cdn.auth0.com/js/base64.js"></script>
<script src="https://cdn.auth0.com/js/es5-shim.min.js"></script>
<![endif]-->
<script src="https://cdn.auth0.com/js/lock/11.30/lock.min.js"></script>
<script>
// Decode utf8 characters properly
var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
config.extraParams = config.extraParams || {};
var connection = config.connection;
var prompt = config.prompt;
var languageDictionary;
var language;
if (config.dict && config.dict.signin && config.dict.signin.title) {
languageDictionary = { title: config.dict.signin.title };
} else if (typeof config.dict === 'string') {
language = config.dict;
}
var loginHint = config.extraParams.login_hint;
var colors = config.colors || {};
// Available Lock configuration options: https://auth0.com/docs/libraries/lock/v11/configuration
var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
auth: {
redirectUrl: config.callbackURL,
responseType: (config.internalOptions || {}).response_type ||
(config.callbackOnLocationHash ? 'token' : 'code'),
params: config.internalOptions
},
configurationBaseUrl: config.clientConfigurationBaseUrl,
overrides: {
__tenant: config.auth0Tenant,
__token_issuer: config.authorizationServer.issuer
},
assetsUrl: config.assetsUrl,
allowedConnections: connection ? [connection] : null,
rememberLastLogin: !prompt,
language: language,
languageBaseUrl: config.languageBaseUrl,
languageDictionary: languageDictionary,
theme: {
//logo: 'YOUR LOGO HERE',
primaryColor: colors.primary ? colors.primary : 'green'
},
prefill: loginHint ? { email: loginHint, username: loginHint } : null,
closable: false,
defaultADUsernameFromEmailPrefix: false,
additionalSignUpFields: [{
name: "beta_code",
placeholder: "enter the beta code",
// The following properties are optional
icon: "https://example.com/assests/address_icon.png",
prefill: "ABC123",
validator: function(address) {
return {
valid: address.length >= 10,
hint: "Must have 10 or more chars" // optional
};
}
}]
});
if(colors.page_background) {
var css = '.auth0-lock.auth0-lock .auth0-lock-overlay { background: ' +
colors.page_background +
' }';
var style = document.createElement('style');
style.appendChild(document.createTextNode(css));
document.body.appendChild(style);
}
lock.show();
</script>
</body>
</html>
1 Like
Awesome, that created it. It created a separate error in actual usage, but I’m not sure if it’s related or not. When I sign up, any request to https://[tenant].auth0.com/dbconnections/signup will fail with HTTP error 400, like this
I’m guessing this is because I didn’t configure the action properly. Is there much documentation on custom actions I could use?
I appreciate the help so far
Ah, I tested out the action and I think it’s a problem with my code, so I think this is more of an issue for Stack Overflow. Thanks for the help!
Ok, it seems this is still happening even though the tests are still working. What could this be? Thanks
Hi @lerichardson,
I took a look at your action with our internal tools, and this line seems to be the issue:
const validBetaCode = (event.user.user.beta_code === betaCodes;
This might be resolved by changing the line to:
const userBetaCode = (event.user.user_metadata || {}).beta_code;
const validBetaCode = betaCodes.includes(userBetaCode);
1 Like
Thank you so much!!
1 Like
This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.