Need help on how to use auth0-lock properly?

Help
, ,
1

Hello,

I have no experience in Auth0 as you may guess in the post title.
My requirements required two custom fields in sign up form.

I’m using auth0-lock to add those fields luckily its working 2 custom fields is now visible on sign up form.

But I have encountered errors like Error: "Callback URL mismatch. The provided redirect_uri is not in the list of allowed callback URLs.

mismatch
mismatch1220×662 39.2 KB

watching this error every time is so disappointing. :pensive:

Note: I already added URL http://localhost:3000/home on dashboard but still getting this error.

By the way, I have checked my dashboard logs here the error.

SAVE_20210223_175813
SAVE_20210223_1758131101×378 91.4 KB

Above screenshot “sign up form success” the rest are not unfortunately. :disappointed_relieved:

Here’s my code

 import Auth0Lock from 'auth0-lock'
 
  const options = {
     additionalSignUpFields: [
       {
         name: 'fName',
         placeholder: 'Enter your first name',
       },
       {
         name: 'lastName',
         placeholder: 'Enter your last name',
       },
     ],
     auth: {
       responseType: 'token',
       sso: false,
     },
     allowShowPassword: true,
     allowedConnections: ['Username-Password-Authentication', 'google-oauth2'],
   }
   const lock = new Auth0Lock(auth0ClientId, auth0Domain, options)
 
 
 const handleLogin = useCallback(() => {
     lock.show()
   }, [])

I’m literally scratching my head overnight because I can’t make it work.
Also, I’m using auth0-react together with auth0-lock which I’m not sure if need.

Any help?

2

Hi @ifStuckAsk ,

Welcome to Auth0 Community!

Can you let us know the reproduction steps? Are you using Embedded Login with Auth0 lock?
When you expand the See details for this error, what does it say? Maybe you have added the wrong callback URL in your application configuration?

3

Let me create codesanbox for this.

4

@supun

To be more specific I’m using next.js for this application.
Here’s my updated code

import { Auth0Provider } from '@auth0/auth0-react'
import router from 'next/router'
// _app.js
const App = (props) => {

 const onRedirectCallback = (state) => {
    router.push(
      state && state.returnTo
        ? state.returnTo
        : window.location.pathname
    )
  }

  return rendered ? (
    <Auth0Provider
        domain={} // auth0 domain
        clientId={} // client id
        audience="https://api.com"
        redirectUri={window.location.origin}
        onRedirectCallback={onRedirectCallback}
      >
      <Component {...pageProps} />
     </Auth0Provider>
    ) :  null
}

// Login button
import { useCallback } from "react";
import Auth0Lock from "auth0-lock";
import { Button } from "@material-ui/core";

const Login = () => {
  const options = {
    additionalSignUpFields: [
      {
        name: "fName",
        placeholder: "Enter your first name"
      },
      {
        name: "lastName",
        placeholder: "Enter your last name"
      }
    ],
    auth: {
       sso: false,
    },
    autoclose: true,
    allowShowPassword: true,
    allowedConnections: ["Username-Password-Authentication", "google-oauth2"]
  };

  const lock = new Auth0Lock(auth0ClientId, auth0Domain, options);

  const handleLogin = useCallback(() => {
    lock.show();
  }, []);

  // from docs code
  lock.on("authenticated", (authResult) => {
    console.log(authResult);

    if (!authResult.accessToken) return;

    lock.getUserInfo(authResult.accessToken, (error, profile) => {
      console.log(error, profile);
    });
  });

  lock.on("authorization_error", (error) => {
    console.log("authorization_error", error);
  });

  return <Button onClick={handleLogin}>Login</Button>;
};

Are you using Embedded Login with Auth0 lock?

  • I’m using Auth0-lock which is an embeddable form. Correct?

When you expand the See details for this error , what does it say?

Maybe you have added the wrong callback URL in your application configuration?

Solve: Yeah, I have misconfigurations issue so from
:x: http://localhost:3000/home
:white_check_mark: http://localhost:3000/home/

2 Likes
5

Glad you have figured it out and thanks for sharing with the rest of community!