Custom SignUp in React

Help
1

I need to have my users enter their first and last name, and potentially other information, when signing up. After trying to work with Universal login, I decided to implement a custom SignUp component in React and auth0-js as follows:

// SignIn Component

import auth0 from 'auth0-js'

const SignUp = () => {
...
var webAuth = new auth0.WebAuth({
    domain: authConfig.domain,
    clientID: authConfig.clientId,
    redirectUri: 'http://localhost:3000/register',
    responseType: 'code token',
  })

// For SignUp button
 const handleSubmit = (e) => {
    e.preventDefault()

    webAuth.redirect.signupAndLogin({

          connection: 'Username-Password-Authentication', 
          email: fields.email, 
          password: fields.password,
          user_metadata: {
            role: 'customer',
            firstName: fields.firstName,
            lastName: fields.lastName,
          }
        }, (err, result) => {
        })
...
}

My callback is another React component called Register as follows:

const Register = ({ match }) => {
return (
     {match.parms}
)
}

However, when Auth0 calls the callback, and the Register component is loaded, I am unable to see the params. It seems like Auth0 inserts a ‘#’ instead of a ‘?’ as needed to work with react-router-dom.

The callback is:
http://localhost:3000/register#access_token=D5xO6jTgeRs…

Is there a way to correct this?

Thanks!

1 Like
2

I got around that one a while ago. There are extensions to react-router-dom that allow you to use a hash.

Then you use the auth0.js parseHash() on the hash portion.

1 Like