Get user ID when redirect to user after sign up

Hello.

I am using Next.js Universal Login with redirect the users while they are signing up. I use redirection because I want to get additional information about users and send them to my server to store them in my external database. In order to that, I want to get user ID to set a primary key in my database. I could not figure out to get User ID in my redirected page.

I tried to use useUser hook to get the user ID in my redirected page but it gave me an error. How I can do that? Should I get the User ID with ID Token?

Any help is welcome, thanks.

Hi @efe_nadir,

Can you please share some code where you get the user ID? It should be available with useUser with user.sub.

Thanks!

Sure @stephanie.chamblee Thank you for your response.

The redirected page code is this:

import React from 'react'
import { useRouter } from 'next/router'
import { useUser} from '@auth0/nextjs-auth0';


const redirectPage = () => {
    const Router = useRouter()
    const {user, isLoading } = useUser();
    //returns undefined
    console.log(user);

    return (
        <div>
            <p>
                redirectedPage 
                    </p>
        
            <button onClick={() => {window.location.href=`https://MY_CUSTOM_DOMAIN/continue?state=${Router.query.state}`}}>
                    Button
            </button>
        </div>
    )
}

export default redirectPage

The flow should be like this in my opinion:

  1. First a user open sign up page. Fills email, password. Click continue and redirect to RedirectedPage that I created in Pages folder in Next.js

  2. In this step I want to get additional data from the user like subscription plan, address etc with forms and send REST API request to my server in order to store it in my external database. (Btw, should I do it in Rules or in my Frontend? I read some topics and they said the API Requests should be in Rules due to security reasons.) And also I should get the User ID in this redirected page and send the data together in order to store it. But I could not get the User ID. I also look /api/v1/me, and it didn’t respond as well.

  3. After user fill the forms, click continue and user redirects to continue?state=THE_STATE in order to finish the authenticate.

Did I create the flow wrong? What will be the best practice to send User ID and additional sign up information to my server?

Thank you!

Working on a response, but do you see a sub claim in /api/v1/me?

It responds {"error":"not_authenticated","description":"The user does not have an active session or is not authenticated"}

But when I look the Auth0 Dashboard > Users. I saw the User credentials that I just sign up and user’s User ID.

1 Like

Your flow looks correct to me based on our doc on redirect rules.

I see what you mean, since the user’s authentication is not yet complete (they have not been redirected to continue?state=THE_STATE), the user ID is not available.

I will do a little research on this and let you know what I find. Thanks for providing additional details!

Thank you! It would be awesome.

Also, even though I use Next.js with React, the server side of the application is not based on Next.js. I want to send the user data to an another server which is Flask.

1 Like

I’ve reached out to my team to confirm a couple of things. I will update you when I hear back!

1 Like

What I’ve learned is that when the user lands on the redirect page, although they don’t yet have a session in the application layer, they are logged into your Auth0 tenant. This means that you can perform silent authentication to get the user’s Auth0 ID.

Alternatively, you can use a post-user registration action to update your system with the Auth0 user ID/email:

Thank you for clarification @stephanie.chamblee

I will try the provided solutions and let you know.

1 Like

Hi @stephanie.chamblee

I looked up the solutions that you provided. Thank you again :slight_smile: The post-user-registration doesn’t work, because I couldn’t send POST Request to my localhost local server due to the localhost refers to the server instance the Actions/Rules/Hooks are running. It is also not very secure I guess. Refer to: Is there a way to use "localhost" as the axios post destination for Auth0 Actions?

I also couldn’t fully understand how I can get the User ID via silent authentication How exactly I can do it?

If the both ways won’t work, Do you know how can I send the user ID right after the user authentication(sign up) on my client side? I think I can use the callback url after user authenticates but it also redirects the callback url after the login process too. So, the User ID is sent at every user login and I don’t desire that.

I’m not sure but I could not find any best practice solution in the documentation for this problem even though it is a common case for applications?

Thank you for your help again!

Hi @efe_nadir,

If your server is not deployed, then you’re correct about not being able to send data via Action.

For Silent Auth in the nextjs SDK, you should be able to perform silent auth like this (based on this github issue):

// pages/api/silent-auth.js

export default async function silentAuth(req, res) {
  try {
    await auth0.handleLogin(req, res, {
      authParams: {
        prompt: 'none',
      }
    });
  } catch (error) {
    console.error(error);
    res.status(error.status || 500).end(error.message);
  }
}

If you’d prefer to not implement silent auth, you could add a custom claim to the ID Token informs your app if the user just signed up. You can do this in a post-login Action:

exports.onExecutePostLogin = async (event, api) => {
  if (event.stats.logins_count === 1) {
    api.idToken.setCustomClaim('https://your-app-name/newUser', true);
  }
};

In your app you can read custom claims in the user object user['https://your-app-name/newUser']

1 Like

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