Theo's Typesafe Cult•2y ago

NextAuth user in middleware

Hi, I want to get user in the middleware so I can do conditional redirection of the users that don't have specific property yet defined. Like an onboarding screen. How can i get user in the middleware to have something like this:

export function middleware(request: NextRequest) {
  const isUserOnboarded = sessionData?.user?.isOnboarded;

  if (request.nextUrl.pathname.startsWith('/') && !isUserOnboarded) {
    return NextResponse.rewrite(new URL('/start', request.url))
  }

  if (request.nextUrl.pathname.startsWith('/start') && 
isUserOnboarded) {
    return NextResponse.rewrite(new URL('/', request.url))
  }
}

export function middleware(request: NextRequest) {
  const isUserOnboarded = sessionData?.user?.isOnboarded;

  if (request.nextUrl.pathname.startsWith('/') && !isUserOnboarded) {
    return NextResponse.rewrite(new URL('/start', request.url))
  }

  if (request.nextUrl.pathname.startsWith('/start') && 
isUserOnboarded) {
    return NextResponse.rewrite(new URL('/', request.url))
  }
}

https://nextjs.org/docs/advanced-features/middleware#conditional-statements

Advanced Features: Middleware | Next.js

Learn how to use Middleware to run code before a request is completed.

14 Replies

barry•2y ago

dont think you can unless doing jwt solution

Patryk Makowski•2y ago

Currently I'm doing this in layout that I'm using on every page

export const MainLayout: FC<MainLayoutProps> = ({
  children,
  title,
  withBackButton,
}) => {
  const { back, push, pathname } = useRouter();

  const { data: sessionData } = useSession();

  if (sessionData === null) {
    push("/login");
  }

  if (!sessionData) {
    return <FullscreenLoader />;
  }

  const isOnboardingPage = pathname === "/start";
  const hasDivision = sessionData.user?.divisionId !== null;

  if (!isOnboardingPage && !hasDivision) {
    push("/start");
  }

  if (isOnboardingPage && hasDivision) {
    push("/");
  }
  
  ...
}

export const MainLayout: FC<MainLayoutProps> = ({
  children,
  title,
  withBackButton,
}) => {
  const { back, push, pathname } = useRouter();

  const { data: sessionData } = useSession();

  if (sessionData === null) {
    push("/login");
  }

  if (!sessionData) {
    return <FullscreenLoader />;
  }

  const isOnboardingPage = pathname === "/start";
  const hasDivision = sessionData.user?.divisionId !== null;

  if (!isOnboardingPage && !hasDivision) {
    push("/start");
  }

  if (isOnboardingPage && hasDivision) {
    push("/");
  }
  
  ...
}

But this for some reason, when I don't have divisionId, it properly goes to /start and when I set it like this

const onSubmitHandler = onSubmit(({ divisionId }) => {
  mutate(divisionId, {
    onSuccess: () => {
      utils.auth.getSession.invalidate();
      push("/");
    },
  });
});

const onSubmitHandler = onSubmit(({ divisionId }) => {
  mutate(divisionId, {
    onSuccess: () => {
      utils.auth.getSession.invalidate();
      push("/");
    },
  });
});

it goes to / and goes back to /start. I need to refresh the page to properly go to / and stay there Do you where else I could do something like this? I thought that If i move that to middleware, it will solve the issue Ok, I managed to solve that by creating another query (hasAlreadyOnboarded), that I invalidate on mutation

Unknown User•2y ago

Message Not Public

vae•2y ago

Same ^ Think #Type Error - can't find role on User model is the same issue!

Unknown User•2y ago

Message Not Public

vae•2y ago

Mhmm yep same idea I'll probs use whatever key is shared within the two objects (in that case ill try it with the user id)

Unknown User•2y ago

Message Not Public

vae•2y ago

Oh yeah, nah doesn't seem too hacky to me? The hackyness feels for me more about editing the .d.ts files in the node modules folder...

barry•2y ago

why would you edit those

vae•2y ago

Ahh it was in the other thread Hang on

barry•2y ago

id not being uncluded in the session type?

vae•2y ago

Found the thread, but seems I got a little confused about how people were going about it... (The .d.ts wasn't in the node modules it was in the types folder) - MY BAD Either way seems we've found some good solutions to this now

barry•2y ago

doesnt have to be in a types folder either just in the project but yh

vae•2y ago

Nooo I meant they were editing the next auth file scaffolded by create t3 Which is in src/types Not the .d.ts in next auth in node_modules But yea

Gaming

Programming

NextAuth user in middleware