Best practice for protecting page / not letting anything run before redirect

In my app, I would like to protect a few key routes. The middleware implementation of NextAuth looks interesting but I am reluctant to swap out the strategy to 'jwt'. As such, I am protecting page by page with something as below: --- const { status } = useSession({ required: true, onUnauthenticated() { signIn() }, }) console.log("I am alive") const { data: todos } = api.todo.getAll.useQuery(); --- However, I notice in these cases, that the page continues to run - briefly (I can see the "I am alive" being logged to the console) - before its redirected to the signin page. This feels like a security lapse to me (stuff running on the page before the page loads). What is the best way to make it wait before running the rest of the page (essentially - not running anything unless the person is authenticated)?
9 Replies
barry
barry•2y ago
You authorize on the server Never, I repeat never give the green light on the client. The default T3 template has a protectedProcedure you can use.
nickparks
nickparks•2y ago
Thanks, getAll here on the TRPC procedure is a protected procedure. However, probably I do not understand where the authentication is happening, I feel like even with it being a protected procedure, the client is still loading more than it should?
cje
cje•2y ago
the query and the page itself are two different things
cje
cje•2y ago
Stack Overflow
Create T3 App Redirect inside a TRPC middleware if user is not signed
How can I trigger a redirect on the server side if a signed in user has not completed their profile page const enforceUserIsAuthed = t.middleware(({ ctx, next }) => { if (!ctx.session || !ctx.
cje
cje•2y ago
i wrote this answer the other day, it lists your options and their pros and cons
nickparks
nickparks•2y ago
this is cool, thank you. i must admit, i dont understand mst of it, I think I still struggle on the getserversideprops stuff. however, the middleware in your answer works perfectly for me 🙂
cje
cje•2y ago
starting to think this might be a good video
barry
barry•2y ago
I still don't get the topic
Lopen
Lopen•2y ago
Home/src/pages/api/requireAuth.ts
import type { GetServerSideProps, GetServerSidePropsContext } from "next";
import { getServerSession } from "next-auth";
import { authOptions } from "../../server/auth";

export const requireAuth =
(func: GetServerSideProps) => async (ctx: GetServerSidePropsContext) => {
const session = await getServerSession(ctx.req, ctx.res, authOptions);

if (!session) {
return {
redirect: {
destination: "/", // login path
permanent: false,
},
};
}

return await func(ctx);
};
import type { GetServerSideProps, GetServerSidePropsContext } from "next";
import { getServerSession } from "next-auth";
import { authOptions } from "../../server/auth";

export const requireAuth =
(func: GetServerSideProps) => async (ctx: GetServerSidePropsContext) => {
const session = await getServerSession(ctx.req, ctx.res, authOptions);

if (!session) {
return {
redirect: {
destination: "/", // login path
permanent: false,
},
};
}

return await func(ctx);
};
Page i want to protect /src/pages/dashboard.tsx
import React from "react";

export const getServerSideProps = requireAuth(async () => {
return { props: {} };
});

function Dashboard() {
return (<div> hi this page is protected </div>)
}
export default Dashboard;
import React from "react";

export const getServerSideProps = requireAuth(async () => {
return { props: {} };
});

function Dashboard() {
return (<div> hi this page is protected </div>)
}
export default Dashboard;
Want results from more Discord servers?
Add your server