Theo's Typesafe Cult•2y ago

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•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.

nickparksOP•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•2y ago

the query and the page itself are two different things

cje•2y ago

https://stackoverflow.com/questions/75169481/create-t3-app-redirect-inside-a-trpc-middleware-if-user-is-not-signed/75419813#75419813

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•2y ago

i wrote this answer the other day, it lists your options and their pros and cons

nickparksOP•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•2y ago

starting to think this might be a good video

barry•2y ago

I still don't get the topic

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;

Gaming

Programming

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