Correct, I followed the react native quickstart.
Here is the code I used:
import Auth0 from 'react-native-auth0';
....
const auth0 = new Auth0({
domain: *customDomain*,
clientId: clientId
});
const signIn = async () => {
try {
const response = await auth0.webAuth
.authorize({ scope: 'openid profile email' });
const user = await auth0.auth.userInfo({ token: response.accessToken });
...
} catch (err) {
console.log(`Error trying to login: ${JSON.stringify(err)}`);
}
};
We are using Universal Login, so here is my configuration that is in https://manage.auth0.com/
<!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.0, maximum-scale=1.0, user-scalable=no" />
</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.3/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;
// 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
},
allowSignUp: false,
/* additional configuration needed for custom domains*/
configurationBaseUrl: config.clientConfigurationBaseUrl,
overrides: {
__tenant: config.auth0Tenant,
__token_issuer: 'login.dev.app.surehand.com'
},
assetsUrl: config.assetsUrl,
allowedConnections: connection ? [connection] : null,
rememberLastLogin: !prompt,
language: language,
languageDictionary: languageDictionary,
theme: {
//logo: 'YOUR LOGO HERE',
primaryColor: '#fba919',
foregroundcolor: '#000',
authButtons: {
'Username-Password-Authentication': {
primaryColor: '#fba919',
foregroundColor: '#000',
},
},
},
prefill: loginHint ? { email: loginHint, username: loginHint } : null,
closable: false,
defaultADUsernameFromEmailPrefix: false,
// uncomment if you want small buttons for social providers
// socialButtonStyle: 'small'
});
lock.show();
</script>
</body>
</html>
I already though that maybe was something in there, so I disable the custom page and tried again and didn’t work.
I’m pretty sure it has to do with the usage of the custom domain, because when I started setting everything up and used the domain that is in the application that follows a pattern like {tenant}.auth0.com I was able to login and use my application, but I need to use the custom domain , so all I did when I started to use my custom domain was:
In this section of code:
const auth0 = new Auth0({
domain: CUSTOM_DOMAIN,
clientId: clientId
});
All I changed was the application domain and used my custom domain, also uncommented these lines in the Universal Login custom page:
configurationBaseUrl: config.clientConfigurationBaseUrl,
overrides: {
__tenant: config.auth0Tenant,
__token_issuer: CUSTOM_DOMAIN
},
That’s all I did, and now the login screen keeps loading after I put my username/pw.
Hope this code helps,
Let me know if you need more information.
Thanks!
Daniel Berrocal
