Theo's Typesafe Cult•14mo ago

Best practice to re-route user if no session exists with t3

Hi! What’s the best practice to re-route users when they arent signed in? I see a lot of examples where they use like useSession() inside of each component. But I would like the users who doesnt have a session yet to be presented with a landing page about the product.

5 Replies

Daluxe•14mo ago

Check out middlewares 🙂

Daluxe•14mo ago

Clerk: https://clerk.com/docs/nextjs/middleware Auth.js: https://github.com/nextauthjs/next-auth-example/blob/main/middleware.ts

Next.js Middleware | Clerk

Details about Clerk middleware for your Next.js application

GitHub

next-auth-example/middleware.ts at main · nextauthjs/next-auth-exam...

Example showing how to use NextAuth.js with Next.js - next-auth-example/middleware.ts at main · nextauthjs/next-auth-example

frenetic.ts•14mo ago

I am using NextAuth with PlanetScale. Have some memory that middlewares isn’t implemented yet for database sessions, only for JWT sessions. Any examples or solutions of usage with NextAuth and PlanetScale?

arete•14mo ago

you can use gSSP or using next auth

import { GetServerSidePropsContext } from "next";
import { getServerAuthSession } from "../server/auth";
import { Session } from "next-auth";

type Callback = (data: { session: Session }) => void;

type RoleRedirects = {
  [key: string]: {
    [key: string]: string;
  };
};

const roleRedirects: RoleRedirects = {
  cashier: {
    ADMIN: "/admin",
    MANAGER: "/manager",
  },
  manager: {
    ADMIN: "/admin",
    CASHIER: "/cashier",
  },
  admin: {
    MANAGER: "/manager",
    CASHIER: "/cashier",
  },

};

export async function roleGuard(
  ctx: GetServerSidePropsContext,
  cb: Callback,
  role: string
) {
  try {
    const session = await getServerAuthSession(ctx);
    if (!session) {
      return {
        redirect: {
          destination: "/",
          permanent: false,
        },
      };
    }
    //@ts-ignore
    const redirectDestination = roleRedirects[role][session.user?.role as string];
    if (redirectDestination) {

      return {
        redirect: {
          destination: redirectDestination,
          permanent: false,
        },
      };

    }

    return cb({ session });
  } catch (error) {
    return {
      redirect: {
        destination: "/",
        permanent: false,
      },
    };
  }
}

import { GetServerSidePropsContext } from "next";
import { getServerAuthSession } from "../server/auth";
import { Session } from "next-auth";

type Callback = (data: { session: Session }) => void;

type RoleRedirects = {
  [key: string]: {
    [key: string]: string;
  };
};

const roleRedirects: RoleRedirects = {
  cashier: {
    ADMIN: "/admin",
    MANAGER: "/manager",
  },
  manager: {
    ADMIN: "/admin",
    CASHIER: "/cashier",
  },
  admin: {
    MANAGER: "/manager",
    CASHIER: "/cashier",
  },

};

export async function roleGuard(
  ctx: GetServerSidePropsContext,
  cb: Callback,
  role: string
) {
  try {
    const session = await getServerAuthSession(ctx);
    if (!session) {
      return {
        redirect: {
          destination: "/",
          permanent: false,
        },
      };
    }
    //@ts-ignore
    const redirectDestination = roleRedirects[role][session.user?.role as string];
    if (redirectDestination) {

      return {
        redirect: {
          destination: redirectDestination,
          permanent: false,
        },
      };

    }

    return cb({ session });
  } catch (error) {
    return {
      redirect: {
        destination: "/",
        permanent: false,
      },
    };
  }
}

on each page

export async function getServerSideProps(ctx: GetServerSidePropsContext) {
    return roleGuard(ctx, (session: any) => ({
        props: {
            session,
        },
    }), "manager")
}

export async function getServerSideProps(ctx: GetServerSidePropsContext) {
    return roleGuard(ctx, (session: any) => ({
        props: {
            session,
        },
    }), "manager")
}

arete•14mo ago

or you can use the next auth custom client handling https://next-auth.js.org/getting-started/client#custom-client-session-handling

Client API | NextAuth.js

The NextAuth.js client library makes it easy to interact with sessions from React applications.

Gaming

Programming

Best practice to re-route user if no session exists with t3