Passing custom parameters with auth0.js authorize

[neeraj1]

Our application has an onboarding process where a new user has to first fill out a form which contains information like their first name, last name, gender, phone, address and some other fields etc after which they are redirected to the payment page.

Once a payment is successful we are redirecting them to the signup page. The signup page has the “Sign Up with Google” button and the custom email and password signup input fields. Once they signup > their account is created on Auth0 and they are logged into the web application.

We are using the auth0.js (auth0-js - npm) toolkit. The onboarding application is in next.js

Now, here’s the problem. The onboarding form which the user filled (containing name and other info) is saved into our MySQL db along with their payment success information. Once the user signs up with auth0 we need some way of connecting the auth0 user record with the personal info saved via the onboarding form.

The code looks something like this:

import auth0 from 'auth0-js';

const webAuth = new auth0.WebAuth({
  domain: process.env.NEXT_PUBLIC_AUTH0_DOMAIN || '',
  clientID: process.env.NEXT_PUBLIC_AUTH0_CLIENT_ID || '',
});

For sign up with Google we use

webAuth.authorize({
      connection: 'google-oauth2',
      responseType: 'code',
      redirectUri:
        `${process.env.NEXT_PUBLIC_LAUNCH_FRONT_END_URL}/login/callback` || '',
      scope: 'openid profile email',
    });

and for custom user name and password

const onSubmit = (values: Inputs) => {
    setLoading(true);
    try {
      webAuth.signup(
        {
          connection: process.env.NEXT_PUBLIC_AUTH0_CONNECTION || '',
          email: values.email,
          password: values.password,
        },
        function (err: any) {
          if (err) {
            if (typeof err?.description === 'string') {
              setSignUpError(err?.description);
            } else if (err?.code === 'invalid_password') {
              setError('password', {
                message: err?.policy,
              });
            }
            setLoading(false);
            return err;
          } else {
            const url = webAuth.client.buildAuthorizeUrl({
              responseType: 'code',
              redirectUri:
                `${process.env.NEXT_PUBLIC_LAUNCH_FRONT_END_URL}/login/callback` ||
                '',
              scope: 'openid profile email',
            });
            router.push(url);
            setLoading(false);
          }
        },
      );
    } catch (err) {
      console.log('');
    }
  };

My plan is that when the user’s personal information is saved on mysql, I will return a guid which I would pass in to the auth0 authorize function. Upon auth0 user creation, I would like to save that guid on the user’s user_metadata, thus connecting them to their personal info record created on our mysql.

Is there a way to pass a custom parameter in both the cases of google sign in and custom signup flow which can be saved on user’s user_metadata?

[marcelina.barycka]

Hi there Neeraj,

We’re trying to address our topics’ backlog to help future visitors with similar use cases and questions get started. Apologies for bumping this up for you.

@neeraj1

My plan is that when the user’s personal information is saved on mysql, I will return a guid which I would pass in to the auth0 authorize function. Upon auth0 user creation, I would like to save that guid on the user’s user_metadata, thus connecting them to their personal info record created on our mysql.

Is there a way to pass a custom parameter in both the cases of google sign in and custom signup flow which can be saved on user’s user_metadata?

It’s possible to send custom query string parameters with the /authorize request, which can later be accessed in the relevant Actions flow like Login flow, referring to the event.request.query property.

or referring to the event.request.body in the case of Pre-user registration flow:

Event.user.user_metadata is an Action flow property allowing you to read and write to the mentioned data received during the flow.

You can also communicate with your external database’s API in Actions to get and write data.

Currently, for your convenience, the Forms for Action feature allows you to gather additional data during the authorization flow. Feel free to take a look here: Forms for Actions.