diff --git a/ui/src/Signin.tsx b/ui/src/Signin.tsx index 613a2b2e03..869af0fd16 100644 --- a/ui/src/Signin.tsx +++ b/ui/src/Signin.tsx @@ -2,6 +2,7 @@ import React, {ReactElement, PureComponent} from 'react' import {withRouter, WithRouterProps} from 'react-router' import {connect} from 'react-redux' +import auth0js from 'auth0-js' import {client} from 'src/utils/api' @@ -83,10 +84,40 @@ export class Signin extends PureComponent { } = this.props clearInterval(this.intervalID) + const config = await getAuth0Config() if (CLOUD && config.socialSignUpOn) { - this.props.router.replace('/login') - return + // The redirectUri must be the same as the url for the origin of the request + // otherwise there's a mismatch and Auth0 cannot validate the response + const redirectUri = window.location.href + // The responseType is arbitrary as it needs to be a non-empty, non "code" value: + // https://auth0.github.io/auth0.js/web-auth_index.js.html#line564 + const responseType = 'token' + + const auth0 = new auth0js.WebAuth({ + domain: config.domain, + clientID: config.clientID, + redirectUri, + responseType, + }) + // This is the result of JS & Auth0 weirdness + return new Promise((resolve, reject) => { + // The TLDR is that checkSession is not awaiting the callback to complete + // So checkSession can return a successful response and continue with the operation + // without the callback being completely finished + return auth0.checkSession({}, (error, webResponse) => { + if (error) { + reject(error) + } + resolve(webResponse) + }) + }) + .then(() => { + window.location.pathname = CLOUD_SIGNIN_PATHNAME + }) + .catch(() => { + this.props.router.replace('/login') + }) } // TODO: add returnTo to CLOUD signin