felipe.franco
felipe.franco
TTCTheo's Typesafe Cult
Created by felipe.franco on 7/26/2023 in #questions
Check DB or update session when DB role changes
This is my initial implemetation, works great:
import { signIn, useSession } from "next-auth/react";
import { useRouter } from "next/router";
import { useEffect } from "react";

export function AuthGuard({ children }: { children: JSX.Element }) {
const { status, data: session } = useSession();
const router = useRouter();

const adminRoutes = ["/admin"];
const isAdminRoute = adminRoutes.some((route) =>
router.pathname.startsWith(route)
);
const isRootRoute = router.pathname === "/";
const isDashboardRouteAndIdNotSet =
router.pathname.startsWith("/dashboard") && !router.query.companySlug;

useEffect(() => {
if (status !== "loading") {
//auth is initialized and there is no user
if (!session) {
void signIn();
}
}
}, [router, status, session]);

/* show loading indicator while the auth provider is still initializing */
if (status === "loading") {
return (
<div className="flex min-h-screen items-center justify-center">
<h1 className="text-5xl">Securing route</h1>
</div>
);
}

// if auth initialized with a valid user show protected page
if (session) {
// if user tries to access root route or /dashboard without a slug and is logged in, redirect to dashboard/[companySlug]
if (isRootRoute || isDashboardRouteAndIdNotSet) {
console.log("redirecting to dashboard");
const companyName = session.user?.companies[0]?.name;
void router.push(`/dashboard/${companyName}`);
return null;
}

const isSuperAdmin = session.user?.role === "SUPERADMIN";

// if user is not admin and tries to access admin routes, redirect to home
if (!isSuperAdmin && isAdminRoute) {
void router.push("/");
return null;
}

return <>{children}</>;
}

/* otherwise don't return anything, will do a redirect from useEffect */
return null;
}
import { signIn, useSession } from "next-auth/react";
import { useRouter } from "next/router";
import { useEffect } from "react";

export function AuthGuard({ children }: { children: JSX.Element }) {
const { status, data: session } = useSession();
const router = useRouter();

const adminRoutes = ["/admin"];
const isAdminRoute = adminRoutes.some((route) =>
router.pathname.startsWith(route)
);
const isRootRoute = router.pathname === "/";
const isDashboardRouteAndIdNotSet =
router.pathname.startsWith("/dashboard") && !router.query.companySlug;

useEffect(() => {
if (status !== "loading") {
//auth is initialized and there is no user
if (!session) {
void signIn();
}
}
}, [router, status, session]);

/* show loading indicator while the auth provider is still initializing */
if (status === "loading") {
return (
<div className="flex min-h-screen items-center justify-center">
<h1 className="text-5xl">Securing route</h1>
</div>
);
}

// if auth initialized with a valid user show protected page
if (session) {
// if user tries to access root route or /dashboard without a slug and is logged in, redirect to dashboard/[companySlug]
if (isRootRoute || isDashboardRouteAndIdNotSet) {
console.log("redirecting to dashboard");
const companyName = session.user?.companies[0]?.name;
void router.push(`/dashboard/${companyName}`);
return null;
}

const isSuperAdmin = session.user?.role === "SUPERADMIN";

// if user is not admin and tries to access admin routes, redirect to home
if (!isSuperAdmin && isAdminRoute) {
void router.push("/");
return null;
}

return <>{children}</>;
}

/* otherwise don't return anything, will do a redirect from useEffect */
return null;
}
13 replies
TTCTheo's Typesafe Cult
Created by felipe.franco on 7/26/2023 in #questions
Check DB or update session when DB role changes
YES! thank you, that is exactly what I needed, I was using JWT to protect the routes using middleware.ts, but that was the wrong choice. Found a great article about protecting routes using a "AuthGuard" component: https://dev.to/ivandotv/protecting-static-pages-in-next-js-application-1e50
13 replies
TTCTheo's Typesafe Cult
Created by felipe.franco on 7/26/2023 in #questions
Check DB or update session when DB role changes
I thought about doing a wrapper component with the getServerSideProps check, and than wrapping the whole app with it, is there a cleaner way to do it?
13 replies
TTCTheo's Typesafe Cult
Created by felipe.franco on 7/26/2023 in #questions
Check DB or update session when DB role changes
Is there a way to do this without using getServerSideProps on every route? (using /pages directory)
13 replies
TTCTheo's Typesafe Cult
Created by felipe.franco on 7/26/2023 in #questions
Check DB or update session when DB role changes
/**
* Options for NextAuth.js used to configure adapters, providers, callbacks, etc.
*
* @see https://next-auth.js.org/configuration/options
*/
export const authOptions: NextAuthOptions = {
session: { strategy: "jwt" },

callbacks: {
async jwt({ token, user }) {
const companiesId = await prisma.company
.findMany({
where: {
users: {
some: {
id: user?.id,
},
},
},
select: {
slug: true,
},
})
.then((companies) => companies.map((company) => company.slug));

if (user) token.role = user.role;
if (companiesId) token.companiesId = companiesId;

return token;
},

session({ session, token }) {
const tokenUser = z.object({
name: z.string(),
email: z.string(),
picture: z.string().nullable(),
sub: z.string(),
role: z.nativeEnum(Role),
companiesId: z.array(z.string()),
iat: z.number(),
exp: z.number(),
jti: z.string(),
});

const parsedToken = tokenUser.safeParse(token);

if (parsedToken.success) {
session.user = {
id: parsedToken.data.sub,
name: parsedToken.data.name,
email: parsedToken.data.email,
image: parsedToken.data.picture,
role: parsedToken.data.role,
companiesId: parsedToken.data.companiesId,
};
}

return session;
},

async signIn({ user }) {
if (user?.email === null || user.email === undefined) return false;

const dbUser = await prisma.user.findUnique({
where: {
email: user.email,
},
});

return dbUser !== null;
},

redirect({ baseUrl, url }) {
console.log("redirect", baseUrl, url);
return url;
},
},

//... provider configs and rest
/**
* Options for NextAuth.js used to configure adapters, providers, callbacks, etc.
*
* @see https://next-auth.js.org/configuration/options
*/
export const authOptions: NextAuthOptions = {
session: { strategy: "jwt" },

callbacks: {
async jwt({ token, user }) {
const companiesId = await prisma.company
.findMany({
where: {
users: {
some: {
id: user?.id,
},
},
},
select: {
slug: true,
},
})
.then((companies) => companies.map((company) => company.slug));

if (user) token.role = user.role;
if (companiesId) token.companiesId = companiesId;

return token;
},

session({ session, token }) {
const tokenUser = z.object({
name: z.string(),
email: z.string(),
picture: z.string().nullable(),
sub: z.string(),
role: z.nativeEnum(Role),
companiesId: z.array(z.string()),
iat: z.number(),
exp: z.number(),
jti: z.string(),
});

const parsedToken = tokenUser.safeParse(token);

if (parsedToken.success) {
session.user = {
id: parsedToken.data.sub,
name: parsedToken.data.name,
email: parsedToken.data.email,
image: parsedToken.data.picture,
role: parsedToken.data.role,
companiesId: parsedToken.data.companiesId,
};
}

return session;
},

async signIn({ user }) {
if (user?.email === null || user.email === undefined) return false;

const dbUser = await prisma.user.findUnique({
where: {
email: user.email,
},
});

return dbUser !== null;
},

redirect({ baseUrl, url }) {
console.log("redirect", baseUrl, url);
return url;
},
},

//... provider configs and rest
13 replies
TTCTheo's Typesafe Cult
Created by felipe.franco on 7/26/2023 in #questions
Check DB or update session when DB role changes
// ./server/auth.ts

//... imports

/**
* Module augmentation for `next-auth` types. Allows us to add custom properties to the `session`
* object and keep type safety.
*
* @see https://next-auth.js.org/getting-started/typescript#module-augmentation
*/
declare module "next-auth" {
interface User {
id: string;
role: Role;
companiesId: string[];
}

interface Session {
user?: User;
}
}

/**
* Module augmentation for `next-auth/jwt` types. Allows us to add custom properties to the `jwt`
* object and keep type safety.
*
* @see https://next-auth.js.org/getting-started/typescript#module-augmentation
*/
declare module "next-auth/jwt" {
interface JWT {
id: string;
role: Role;
companiesId: string[];
}
}
// ./server/auth.ts

//... imports

/**
* Module augmentation for `next-auth` types. Allows us to add custom properties to the `session`
* object and keep type safety.
*
* @see https://next-auth.js.org/getting-started/typescript#module-augmentation
*/
declare module "next-auth" {
interface User {
id: string;
role: Role;
companiesId: string[];
}

interface Session {
user?: User;
}
}

/**
* Module augmentation for `next-auth/jwt` types. Allows us to add custom properties to the `jwt`
* object and keep type safety.
*
* @see https://next-auth.js.org/getting-started/typescript#module-augmentation
*/
declare module "next-auth/jwt" {
interface JWT {
id: string;
role: Role;
companiesId: string[];
}
}
13 replies
TTCTheo's Typesafe Cult
Created by felipe.franco on 7/26/2023 in #questions
Check DB or update session when DB role changes
// middleware.ts
import { type NextRequestWithAuth, withAuth } from "next-auth/middleware";
import { NextResponse } from "next/server";

export default withAuth(
function middleware(request: NextRequestWithAuth) {
console.log("middleware", request.nextUrl.pathname);

const token = request.nextauth.token;
const pathname = request.nextUrl.pathname;
const companyId = pathname.split("/")[2] ?? "";

// Check if the user is authenticated
if (!token) {
console.log("redirecting to auth", request.nextUrl.pathname);
return NextResponse.rewrite(new URL("/auth/signin", request.url));
}

const defaultCompanyId = token.companiesId[0];
const isCompanyInToken = token.companiesId.includes(companyId);

// Object to define redirection rules for each role
const roleRedirectRules = {
USER: !isCompanyInToken,
ADMIN: !isCompanyInToken && !companyId,
SUPERADMIN: !companyId,
};

const isDashboardWithoutCompanyId =
!companyId && pathname.startsWith("/dashboard");
const shouldRedirect =
roleRedirectRules[token.role] || isDashboardWithoutCompanyId;

// Redirects based on the role's rules
if (shouldRedirect) {
console.log("rewrite to default company id", defaultCompanyId);
return NextResponse.redirect(
new URL(`/dashboard/${defaultCompanyId}`, request.url)
);
}
},
{
pages: {
signIn: "/auth/signin",
},
}
);

export const config = {
matcher: [
"/((?!api|_next/static|_next/image|favicon.ico).*)",
"/",
"/dashboard/:path*",
],
};
// middleware.ts
import { type NextRequestWithAuth, withAuth } from "next-auth/middleware";
import { NextResponse } from "next/server";

export default withAuth(
function middleware(request: NextRequestWithAuth) {
console.log("middleware", request.nextUrl.pathname);

const token = request.nextauth.token;
const pathname = request.nextUrl.pathname;
const companyId = pathname.split("/")[2] ?? "";

// Check if the user is authenticated
if (!token) {
console.log("redirecting to auth", request.nextUrl.pathname);
return NextResponse.rewrite(new URL("/auth/signin", request.url));
}

const defaultCompanyId = token.companiesId[0];
const isCompanyInToken = token.companiesId.includes(companyId);

// Object to define redirection rules for each role
const roleRedirectRules = {
USER: !isCompanyInToken,
ADMIN: !isCompanyInToken && !companyId,
SUPERADMIN: !companyId,
};

const isDashboardWithoutCompanyId =
!companyId && pathname.startsWith("/dashboard");
const shouldRedirect =
roleRedirectRules[token.role] || isDashboardWithoutCompanyId;

// Redirects based on the role's rules
if (shouldRedirect) {
console.log("rewrite to default company id", defaultCompanyId);
return NextResponse.redirect(
new URL(`/dashboard/${defaultCompanyId}`, request.url)
);
}
},
{
pages: {
signIn: "/auth/signin",
},
}
);

export const config = {
matcher: [
"/((?!api|_next/static|_next/image|favicon.ico).*)",
"/",
"/dashboard/:path*",
],
};
13 replies
TTCTheo's Typesafe Cult
Created by felipe.franco on 7/26/2023 in #questions
Check DB or update session when DB role changes
Currently I have this middleware.ts that checks the user role and the companies that the user has access to. The roles are: - USER : Can access only the /dashboard/[companyId] route if the companyId is present in the token.companiesIds; - ADMIN: Currently the same access as the USER role (other routes will be implemented in the future); - SUPERADMIN: Can access all /dashboard/[companyId] independent if the companyId is present in their token.companiesIds. All requests that try to access "/" or a /dashboard/[companyId] are redirected to /dashboard/[companyId] using the first companyId in token.companiesIds.
13 replies