# Need help on how to use auth0-lock properly?

**URL:** <https://community.auth0.com/t/need-help-on-how-to-use-auth0-lock-properly/58340>\
**Category:** Get Help\
**Tags:** auth0-lock, signup, auth0\
**Created:** [February 23, 2021, 10:33am UTC](https://community.auth0.com/t/need-help-on-how-to-use-auth0-lock-properly/58340 "2021-02-23T10:33:53Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ifStuckAsk](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/ifstuckask/32/27778_2.png) [@ifStuckAsk](https://community.auth0.com/u/ifStuckAsk)\
**Post date:** [February 23, 2021, 10:33am UTC](https://community.auth0.com/t/need-help-on-how-to-use-auth0-lock-properly/58340/1 "2021-02-23T10:33:53Z")

</div>

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](https://github.com/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](https://global.discourse-cdn.com/auth0/original/3X/6/a/6add419d63cb7795fa0c235cd55a8264ab478714.jpeg)

watching this error every time is so disappointing. 😔

Note: I already added URL [http://localhost:3000/home](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](https://global.discourse-cdn.com/auth0/original/3X/0/4/04247dcea02b801164b749b2edd22776965e26e6.jpeg)

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

Here’s my code

```javascript
 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?

---

<div class="post-metadata">

**Author:** ![supun](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/supun/32/17069_2.png) [@supun](https://community.auth0.com/u/supun)\
**Post date:** [February 23, 2021, 11:50am UTC](https://community.auth0.com/t/need-help-on-how-to-use-auth0-lock-properly/58340/2 "2021-02-23T11:50:05Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![ifStuckAsk](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/ifstuckask/32/27778_2.png) [@ifStuckAsk](https://community.auth0.com/u/ifStuckAsk)\
**Post date:** [February 23, 2021, 12:06pm UTC](https://community.auth0.com/t/need-help-on-how-to-use-auth0-lock-properly/58340/3 "2021-02-23T12:06:21Z")

</div>

Let me create codesanbox for this.

---

<div class="post-metadata">

**Author:** ![ifStuckAsk](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/ifstuckask/32/27778_2.png) [@ifStuckAsk](https://community.auth0.com/u/ifStuckAsk)\
**Post date:** [February 23, 2021, 12:35pm UTC](https://community.auth0.com/t/need-help-on-how-to-use-auth0-lock-properly/58340/4 "2021-02-23T12:35:59Z")

</div>

@supun

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

```javascript
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?**

- **unauthorized\_client** : Callback URL mismatch. [http://localhost:3000/home/](http://localhost:3000/home/) is not in the list of allowed callback URLs

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

- My configurations

Solve: Yeah, I have misconfigurations issue so from  
❌ [http://localhost:3000/home](http://localhost:3000/home)  
✅ [http://localhost:3000/home/](http://localhost:3000/home/)

---

<div class="post-metadata">

**Author:** ![konrad.sopala](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/konrad.sopala/32/13516_2.png) [@konrad.sopala](https://community.auth0.com/u/konrad.sopala)\
**Post date:** [February 24, 2021, 11:14am UTC](https://community.auth0.com/t/need-help-on-how-to-use-auth0-lock-properly/58340/5 "2021-02-24T11:14:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![konrad.sopala](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/konrad.sopala/32/13516_2.png) [@konrad.sopala](https://community.auth0.com/u/konrad.sopala)\
**Post date:** [February 25, 2021, 10:32am UTC](https://community.auth0.com/t/need-help-on-how-to-use-auth0-lock-properly/58340/6 "2021-02-25T10:32:41Z")

</div>