Next.js Discord

Discord Forum

How to redirect in unauthorized.tsx

Unanswered
Goldstripe sardinella posted this in #help-forum
Open in Discord
Goldstripe sardinellaOP
I have a admin page in my app and if the user isnt logged in it shows them the unauthorized.tsx that has a login form in it. But once the user logs in it still shows the form. Ive tried using router.refresh, revalidatepath and all sorta stuff but to no evail. Any solutions?

46 Replies

Milkfish
How are you checking the user's auth status ?
Goldstripe sardinellaOP
like this (in /admin/layout.tsx)

  const session = await getSession();

  if (session.type === 500) return unauthorized();


and this is my server action

export const getSession = async (): Promise<RETURNINT> => {
  const cookieStore = await cookies();

  const name = cookieStore.get(NAME);
  const code = cookieStore.get(CODE);

  if (!name || !code) {
    return { type: 500, data: null };
  }

  const data = await fetchAccessUserByDetails(code.value, name.value);

  if (!data) return { type: 500, data: null };

  return { type: 200, data };
};
btw dont be shy to ping me
even if its multiple times idm
Abhii
Use it like this


const session = await getSession();

if (session.type === 500){
unauthorized()
return;
}
Goldstripe sardinellaOP
but why return empty if its not 500?
if its not 500 aka there user is logged successfully it shows the admin content
Abhii
it will run only if its 500 else admin content will be shown
Goldstripe sardinellaOP
but its the same as doing

  const session = await getSession();

  if (session.type === 500) return unauthorized();

  return (...);
am i wrong?
Abhii
Yes , you are returning without using unauthorised()
Goldstripe sardinellaOP
so i just remove return unauthorized() and replace it with unauthorized() ?
Abhii
Yes
Goldstripe sardinellaOP
👍
but how would that influence of redirecting in unauthorized.tsx?
Abhii
unauthorized() bound to specific route which is unauthorized.tsx page
try and lmk if works
Goldstripe sardinellaOP
doesnt seem like it fixed the issue
let me try something 1s
ok yeah it logs in successfully it just fails to show the admin when it logs in successfully
it would still show the unauthorized.tsx file
Abhii
Can you share full code
Goldstripe sardinellaOP
what do you need?
Abhii
Admin/layout.tsx
Goldstripe sardinellaOP
import { Skeleton } from "@/components/ui/skeleton";
import { Toaster } from "@/components/ui/sonner";
import { Suspense } from "react";
import AnnouncementPopover from "./_components/announcement-popover";
import NavContent from "./_components/nav-content";
import MobileNav from "./_components/mobile-nav";
import Link from "next/link";
import { Home } from "lucide-react";
import { Button } from "@/components/ui/button";
import { getSession } from "@/app/actions/authentication";
import { unauthorized } from "next/navigation";
import Logout from "./_components/logout";
import { AccessUser } from "@/types";
import UpdateLastseen from "./_components/update-lastseen";

export default async function Layout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await getSession();

  if (session.type === 500) unauthorized();

  return (
    <>
      <Suspense>
        <UpdateLastseen />
      </Suspense>
      <Toaster richColors />
      <div className="fixed left-4 inset-y-4 bg-sidebar border-2 border-muted h-[97%] max-w-sm w-full rounded-2xl max-xl:!hidden p-4 space-y-4">
        <NavContent data={session.data as AccessUser} />
      </div>
      <section className="xl:pl-96">
        <div className="px-8 py-4">
          <div className="w-full h-fit border-b-2 border-muted mb-4 flex pb-2 items-center gap-4">
            <Button variant={"ghost"} size={"icon"}>
              <Link href={`/`} prefetch>
                <Home />
              </Link>
            </Button>
            <MobileNav data={session.data as AccessUser} />
            <Suspense fallback={<Skeleton className="h-10 w-44" />}>
              <AnnouncementPopover />
            </Suspense>
            <Logout />
          </div>
          {children}
        </div>
      </section>
    </>
  );
}
i dont think the issue comes from here tho
@Abhii Use it like this const session = await getSession(); if (session.type === 500){ unauthorized() return; }
Abhii
just replace you current session if condition with this
Goldstripe sardinellaOP
i did it returns empty because you're returning nothing if its not 500
wait
no
Abhii
just use it man
Goldstripe sardinellaOP
i implemented it wrong thats why mb
yeah doesnt work either i need to refresh the page again
its something with the login action i think
Abhii
Try replacing unauthorized() with redirect(“/unauthorized”)
Goldstripe sardinellaOP
kay
you're redirecting to a path and unauthorized isnt really a path tho
Abhii
have created a unauthorized.tsx route?
Goldstripe sardinellaOP
yes?
Abhii
Try redirecting it to login route
Goldstripe sardinellaOP
theres no login route
unauthorized.tsx has the login component
just like same example as in the nextjs docs
Goldstripe sardinellaOP
(made a temporary workaround for now by just returning the login form instead of unauthorized() )
Australian Freshwater Crocodile
enable the experimental authInterrupts configuration option in your next.config.js file
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
experimental: {
authInterrupts: true,
},
}

export default nextConfig