auth0-react
auth0-react copied to clipboard
auth0
Custom login for a user part of an organization redirecting back to same login page
“@auth0/auth0-react”: “^1.10.2” “auth0-js”: “^9.19.0”
I am using custom login page to login into my application. But somehow the redirection is happening to the same login page. I am organization along with the request.
Request URL: https://app.us.auth0.com/usernamepassword/login Payload: { “client_id”: “client_id”, “redirect_uri”: “http://localhost:9030/”, “tenant”: “tenant_name”, “response_type”: “code”, “_csrf”: “csrf”, “state”: “state”, “_intstate”: “deprecated”, “organization”: “org_id”, “username”: “username”, “password”: “password”, “connection”: “Username-Password-Authentication” }
After this call, https://app.us.auth0.com/login/callback is fired and then the /authorize/resume?state call and finally /login?state call.
I am not sure if I have missed something while setting up the application. If anyone has faced the same issue or know what to do, could you please me out here?
Thanks, Treesa
Hi @treesa-keyvalue - thanks for raising this
I can see you're trying to mix our SDK that does embedded login (auth0.js) with an SDK that uses the Universal Login Page (auth0-react).
I'm not sure entirely what's happening from your description, but these 2 SDKs are not designed to work together, so I wouldn't expect them to.
@adamjmcgrath Sorry that I wasn't clear on this. I have used @auth0/auth0-react in my application and have used auth0.js in the custom template. I have used the default template that was available and still it did not navigate me to the application. The default template used when I enabled Custom login page is the one below:
<!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" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
body, html {
height: 100%;
background-color: #f9f9f9;
}
.login-container {
position: relative;
height: 100%;
}
.login-box {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 15px;
background-color: #fff;
box-shadow: 0px 5px 5px #ccc;
border-radius: 5px;
border-top: 1px solid #e9e9e9;
}
.login-header {
text-align: center;
}
.login-header img {
width: 75px;
}
#error-message {
display: none;
white-space: break-spaces;
}
</style>
<body>
<div class="login-container">
<div class="col-xs-12 col-sm-4 col-sm-offset-4 login-box">
<div class="login-header">
<img src="https://cdn.auth0.com/styleguide/1.0.0/img/badge.svg"/>
<h3>Welcome</h3>
<h5>PLEASE LOG IN</h5>
</div>
<div id="error-message" class="alert alert-danger"></div>
<form onsubmit="return false;" method="post">
<div class="form-group">
<label for="name">Email</label>
<input
type="email"
class="form-control"
id="email"
placeholder="Enter your email">
</div>
<div class="form-group">
<label for="name">Password</label>
<input
type="password"
class="form-control"
id="password"
placeholder="Enter your password">
</div>
<div class="captcha-container form-group"></div>
<button
type="submit"
id="btn-login"
class="btn btn-primary btn-block">
Log In
</button>
<button
type="button"
id="btn-signup"
class="btn btn-default btn-block">
Sign Up
</button>
<hr>
<button
type="button"
id="btn-google"
class="btn btn-default btn-danger btn-block">
Log In with Google
</button>
</form>
</div>
</div>
<!--[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/polyfills/1.0/base64.min.js"></script>
<script src="https://cdn.auth0.com/js/polyfills/1.0/es5-shim.min.js"></script>
<![endif]-->
<script src="https://cdn.auth0.com/js/auth0/9.18/auth0.min.js"></script>
<script src="https://cdn.auth0.com/js/polyfills/1.0/object-assign.min.js"></script>
<script>
window.addEventListener('load', function() {
var config = JSON.parse(
decodeURIComponent(escape(window.atob('@@config@@')))
);
var leeway = config.internalOptions.leeway;
if (leeway) {
var convertedLeeway = parseInt(leeway);
if (!isNaN(convertedLeeway)) {
config.internalOptions.leeway = convertedLeeway;
}
}
var params = Object.assign({
overrides: {
__tenant: config.auth0Tenant,
__token_issuer: config.authorizationServer.issuer
},
domain: config.auth0Domain,
clientID: config.clientID,
redirectUri: config.callbackURL,
responseType: 'code',
organization: 'org_id',
}, config.internalOptions);
var webAuth = new auth0.WebAuth(params);
var databaseConnection = 'Username-Password-Authentication';
var captcha = webAuth.renderCaptcha(
document.querySelector('.captcha-container')
);
function login(e) {
e.preventDefault();
var button = this;
var username = document.getElementById('email').value;
var password = document.getElementById('password').value;
button.disabled = true;
webAuth = new auth0.WebAuth(params);
webAuth.login({
realm: databaseConnection,
username: username,
password: password,
}, function(err) {
if (err) displayError(err);
button.disabled = false;
});
}
function signup() {
var button = this;
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
button.disabled = true;
webAuth.redirect.signupAndLogin({
connection: databaseConnection,
email: email,
password: password,
captcha: captcha.getValue()
}, function(err) {
if (err) displayError(err);
button.disabled = false;
});
}
function loginWithGoogle() {
webAuth.authorize({
connection: 'google-oauth2'
}, function(err) {
if (err) displayError(err);
});
}
function displayError(err) {
captcha.reload();
var errorMessage = document.getElementById('error-message');
errorMessage.innerHTML = err.policy || err.description;
errorMessage.style.display = 'block';
}
document.getElementById('btn-login').addEventListener('click', login);
document.getElementById('btn-google').addEventListener('click', loginWithGoogle);
document.getElementById('btn-signup').addEventListener('click', signup);
});
</script>
</body>
</html>
Hi @treesa-keyvalue
So, am I right in saying that you are logging in from your react app with a redirect_uri of http://localhost:9030/ eg.
<Auth0Provider
domain="YOUR_AUTH0_DOMAIN"
clientId="YOUR_AUTH0_CLIENT_ID"
redirectUri={"http://localhost:9030/"}
>
<App />
</Auth0Provider>
But after you login to your tenant, you return to http://localhost:9030/login, and you expect to be returned to http://localhost:9030/?
@adamjmcgrath no it stays in the same url: https://myapp.us.auth0.com/login?state=hKFo2SBjQlc5SXZXWVNsaTFqZzRvTDdULXRaeWt3bW0zZ3ZRMKFupWxvZ2luo3RpZNkgZFFGN1JxbTI0aFRhRHF5WUlNUVFhUmFMTDIzUUN2MG-jY2lk2SBqTmJvMmR3TllpaDRSc216Wkc4SE5UcnlLeVFGRUJubw&client=jNbo2dwNYih4RsmzZG8HNTryKyQFEBno&protocol=oauth2
I could see this below request has been made after login
Request URL: https://myapp.us.auth0.com/login?state=hKFo2SBjQlc5SXZXWVNsaTFqZzRvTDdULXRaeWt3bW0zZ3ZRMKFupWxvZ2luo3RpZNkgZFFGN1JxbTI0aFRhRHF5WUlNUVFhUmFMTDIzUUN2MG-jY2lk2SBqTmJvMmR3TllpaDRSc216Wkc4SE5UcnlLeVFGRUJubw&client=jNbo2dwNYih4RsmzZG8HNTryKyQFEBno&protocol=oauth2
The above request is made soon after Request URL: https://myapp.us.auth0.com/authorize/resume?state=dQF7Rqm24hTaDqyYIMQQaRaLL23QCv0o
Hi @treesa-keyvalue - could you share a HAR file of what's going on (removing any sensitive information) - I'm still not able to understand what your issue is
@adamjmcgrath
You said:
I can see you're trying to mix our SDK that does embedded login (auth0.js) with an SDK that uses the Universal Login Page (auth0-react).
How else can we achieve login programmatically inside React app without using auth0.WebAuth.login from auth0-js?
@adriandmitroca
How else can we achieve login programmatically inside React app without using auth0.WebAuth.login from auth0-js?
You can use auth0-js, you just can't mix auth0-js and auth0-react
@treesa-keyvalue closing this, feel free to share a HAR file if you want me to reopen