Sending userID from JWT token to Backend from NextJS app

Help
,
1

Hi,

I wanted to send the user_id to my backend , and believe the most secure way to do this is via the JWT token that is deserialised to retrieve ‘sub’ field.

The documentation isnt clear enough for my uneducated self unfortunately.

Detailed requirements:

From my NextJS web app users can upload videos, and params, which are sent to my backend (fastapi endpoint to sent data to sql/blob storage)

My endpoint uploads videos to a storage account, and i want t use the user_id to map and determine where it is stored.

For this reason, i wanted to basically say, pass the jwt token in the header of the response.

Please can someone help me.

3

Hey @virajvaitha1995 welcome to the community!

I assume you are using nextjs-auth0? If so, you probably want to take a look at the following example which outlines how to access an external API from an API route:

4

I don’t think so.

I thought that when a user logs in, it created some special token that contains user_id, and other information.

I wanted to send that encoded information (believed to be JWT token) from client side to server side, to help keep the user_id more ‘secure’, especially as it is used to identify users and their content in blob storage.

I don’t think this example you are showing here would let me send the JWT in my post request from server to client?

5

That’s exactly correct, when a user logs in there is typically an ID and access token returned. The ID token is designed to be used client-side whereas the access token is meant to be passed to an external API/service which validates it.

The access token you send to your API will have a sub claim that is equivalent to the user_id of the user granted the token.

I am bit confused whether you are asking about sending the token from client (nextjs) to server or the opposite - The code I shared previously adds the jwt as an authorization header in the request to an external API. It’s a bit different than how a typical SPA SDK works in that the API route in your nextjs app serves as a proxy between frontend and your external API. For more details on this I recommend checking out this Github issue.

6

firstly thank you for your responses and patience with me.

Let me clarify.

My frontend stack is: NextJS, Typescript, React and TailwindCSS, deployed on its own compute.

I have a backend (FastAPI app hosted on a different compute), that is responsbile for communicating with SQL Server & my Frontend Application.

As you can see in the code below:

import axios from 'axios';
import type { PostUploadData, PostUploadInput, PostUploadOptions } from './types';
// import { getAccessToken } from '@auth0/nextjs-auth0';  // Import the Auth0 function

const UPLOAD_URL = 'https://myAPIURL.azurewebsites.net/upload';
const USER_ID = '456'; #Hard coded, but i want to switch this to the Access Token via header, and decode at the backend once recieved.
const QUALITY = 0;

export const postUpload = async ({
  uploaded_file,
  title,
  src_language = 'en',
  dest_language = 'en',
}: PostUploadInput): Promise<PostUploadData> => {
  // Get and log the access token
  // const { accessToken } = await getAccessToken();  // Make sure to provide necessary arguments if required
  // console.log("Access Token:", accessToken);

  // ... your existing code
  const formData = new FormData();
  formData.append('uploaded_file', uploaded_file);
  formData.append('title', title);
  formData.append('user_id', USER_ID);

  const res = await axios.post(
    `${UPLOAD_URL}?src_language=${src_language}&dest_language=${dest_language}&quality=${QUALITY}`,
    formData,
    { headers: { 'Content-Type': 'multipart/form-data' } }
  );

  return res.data;
};

Right now im literally just trying to get the access token and print it to see i can access it but it’s not running.

Ideally i can just pass that access token (which depends on the user logged in), and pass it into the header of the request.

Thanks,

Viraj

1 Like
7

Thanks for clarifying!

Have you had a chance to take a look at our React and/or Next.js quickstarts and subsequent sample applications (React , Next.js) - Both outline how to get an access token for a user. It might be helpful to check those out for comparison purposes.

8

The quickstart doesn’t show how to do this, and there is no detailed documentation on this topic.

They give one example with a simple Get Request, on an outdated nextjs version that uses page router.

I thought the Access Token is created on authorisation/authentication, so i was hoping i could just access this, like Header: getAccessToken().

I’ll have to switch to a different library i think

1 Like
9

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