Theo's Typesafe Cult•2y 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•2y ago

Check out middlewares 🙂

Daluxe•2y 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.tsOP•2y 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•2y 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•2y 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