Need help on how to use auth0-lock properly?

ifStuckAsk · February 23, 2021, 1:45pm

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.

watching this error every time is so disappointing.

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.

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

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?

supun · February 23, 2021, 11:50am

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?

ifStuckAsk · February 23, 2021, 12:36pm

Let me create codesanbox for this.

ifStuckAsk · February 24, 2021, 11:04am

@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?