TTC
Theo's Typesafe Cult•2y ago
frenetic.ts

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
Daluxe•2y ago
Check out middlewares 🙂
Daluxe
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.ts
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
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
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.

Did you find this page helpful?