CODEWITHSUNDEEP
next.jsmiddleware
Vijay
Vijay

Reputation: 141

How to retrieve data from localStorage in Next.js 13 middleware?

I am new to Next.js and I'm interested in implementing role-based authentication using Next.js middleware. In my scenario, after a user successfully logs in, I retrieve their role from the database and store it in the localStorage using Redux. To enable role-based routing, I need to access the user's role from the middleware. However, I'm encountering difficulties in accessing the localStorage.

I don't know how can i access the localStorage from nextJS middleware. If you have any suggestions or ideas, please share them.

Thanks in advance

Upvotes: 5

Views: 9974

Answers (3)

Ethan
Ethan

Reputation: 1676

The short answer for this use case is you shouldn't. In fact you should never store sensitive data in local storage (why not?)

I would following @Dimitar's approach. I would also take a look at this article from the Next.js docs on best practices for auth.

However, you can modify your current method of auth slightly to be more secure.

Instead of:

After a user successfully logs in, I retrieve their role from the database and store it in the localStorage using Redux. To enable role-based routing, I need to access the user's role from the middleware.

Do this:

After a user successfully logs in, I retrieve their role from the database and store it in the cookies using Redux. To enable role-based routing, I need to access the user's role from the middleware.

This is simple enough to do using the next/headers module:

middleware.ts

import { cookies } from "next/headers";
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
   const cookieStore = cookies();
   const authToken = cookieStore.get("you_auth_token");

   // Rest of your middleware logic
}

Upvotes: 1

Feriel Mtira
Feriel Mtira

Reputation: 1

In Next.js, middleware runs on the server-side, which means you cannot directly access localStorage from it. localStorage is a browser API and is only available on the client-side, so use cookies instead. In your redux, store your token in the cookies:

.addCase(login.fulfilled, (state, action: PayloadAction<{ access_token: string }>) => {
  state.status = 'succeeded';
  state.token = action.payload.access_token;
  Cookies.set('auth-token', action.payload.access_token);
})

And in your middleware add this:

const tokenCookie = request.cookies.get('auth-token');
const token = tokenCookie?.value;

Upvotes: 0

mpalencia
mpalencia

Reputation: 6047

This worked

import { NextRequest, NextResponse } from 'next/server';

export async function middleware(request: NextRequest) {
  
  // Check if the request is coming from the browser
  if (typeof window !== 'undefined') {
    const data = localStorage.getItem('user_Data')
  }

}

Remember, accessing local storage on the server-side might not always be necessary or desirable, as it's typically used for client-side storage. Ensure that this approach aligns with your specific requirements and security considerations

Upvotes: 1

Related Questions