PKCE with SPA custom UI

[stephen1]

I would like to have a user never leave the main website page and login in with a PKCE flow. Is it possible to use a custom UI and have the user navigate from this page?

[dan.woda]

Hi @stephen1,

I think this would be embedded login with spa.js which may not be possible at this time. Let me look a bit deeper and I will get back to you.

Thanks,
Dan

[stephen1]

Awesome thanks for looking into it for me Dan!

[dan.woda]

I asked some members of our team and they say it should be possible, but not with any of the existing auth0 libraries at this time.

Thanks,
Dan

[stephen1]

We would like to use a library if possible. Would you suggest then going with the implicit flow and using the auth0.js library. Appreciate all the help!

[dan.woda]

Take a look at this resource for configuring your Auth0 application for embedded login.

[stephen1]

So I have read through that document many times and have tried implementing the signup flow but it doesn’t add a user to the database. I am only able to call the API directly rather than using the auth0-js wrapper. Not sure if there is something wrong with the wrapper or just the documentation. I did notice that under webAuth when I console.log(webAuth) I don’t even see a signUp method.

For reference I am referring to this section:
https://auth0.com/docs/libraries/auth0js/v9#signup

[dan.woda]

Are you getting any errors back when you try and use the signup method?

[stephen1]

It doesn’t ever even hit this block which means it isn’t returning an error

function (err) {
                console.log(err);
                debugger;
                if (err) return alert('Something went wrong: ' + err);
            })

[dan.woda]

Can you post your code?

[stephen1]

Here is a stripped down version of my component:

import React, { useState } from 'react';
import webAuth from '../../../auth/AuthService';


const CreateAccount = () => {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

    const handleEmail = (e) => {
        setEmail(e.target.value)
    }


    const handlePassword = (e) => {
        setPassword(e.target.value)
    }

    const signUp = () => {
        console.log(email, " ", password)
        console.log(webAuth);
        debugger;
        webAuth.signup({
            connection: 'Username-Password-Authentication',
            email: email,
            password: password,
        }, function (err) {
            console.log(err);
            debugger;
            if (err) return alert('Something went wrong: ' + err);
        })
    };

    return (
        <div>
            <form id="signup">
                <fieldset>
                    <legend>Sign up</legend>
                    <p>
                        <input type="email" value={email} onChange={handleEmail} id="signup-email" placeholder="Email" required />
                    </p>
                    <p>
                        <input type="password" value={password} onChange={handlePassword} id="signup-password" placeholder="Password"
                            required />
                    </p>
                    <button onClick={signUp} buttonType="submit">Submit</button>
                </fieldset>
            </form>
        </div>
    )
}

export default CreateAccount;

And my AuthService file:

import auth0 from 'auth0-js';
import config from "../config/auth_config.js";

const webAuth = new auth0.WebAuth({
  domain: config.domain,
  redirectUri: `${window.location.origin}/callback`,
  clientID: config.clientId,
  responseType: 'id_token',
  scope: 'openid profile email'
});


export default webAuth;

Config:

module.exports = {
    domain: process.env.REACT_APP_AUTH0_DOMAIN,
    clientId: process.env.REACT_APP_AUTH0_CLIENT_ID
}

And my ENV file has my variables.

[dan.woda]

Can you check the logs page in auth0 and see if there are any errors there? Could you also DM me your tenant name please?

[stephen1]

So here is the fix and the biggest waste of a day ever. Hopefully this helps someone else out:

onClick={e => {
                                e.preventDefault();
                                signUp()
                            }}

[dan.woda]

Glad you got this working!

Thanks for figuring this out and posting your solution.

Best,
Dan