PKCE with SPA custom UI

Help
1

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?

1 Like
3

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

1 Like
4

Awesome thanks for looking into it for me Dan!

5

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

1 Like
6

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!

1 Like
7

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

8

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.

14%20PM

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

9

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

10

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);
            })
11

Can you post your code?

12

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.

1 Like
13

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?

14

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

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

Glad you got this working!

Thanks for figuring this out and posting your solution.

Best,
Dan

16

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.