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
Daluxe2y ago
Check out middlewares 🙂
Daluxe
Daluxe2y ago
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.ts2y 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
arete2y 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
arete2y 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.
Want results from more Discord servers?
Add your server