#Page flashing before authentication

62 messages · Page 1 of 1 (latest)

bitter ocean
#

page flashing for some reason on a route

midnight roverBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

bitter ocean
#

middleware.ts ```jsx
export { default } from "next-auth/middleware";

#

flashing page : ```jsx
import { getSortedPostsData } from "@/utils/posts";
import { BlogTile } from "../components/BlogTile";

export default async () => {
const allPostsData = await getSortedPostsData();
return (
<div className="h-full flex flex-col space-y-20">
<div className="text-center text-5xl">All Blogs</div>
<div className="grid grid-flow-row gap-5 decoration-0 grid-cols-4 h-full grid-rows-3">
{allPostsData.map(({ id, date, title, about }) => (
<BlogTile key={id} id={id} title={title} date={date} about={about} />
))}
</div>
</div>
);
};

#

Blog tile component : ```jsx
import { PostsMetadata } from "../../utils/posts";
import Link from "next/link";

export const BlogTile = ({ id, title, date, about }: PostsMetadata) => {
return (
<Link
href={/posts/${id}}
className="col-span-1 row-span-1 dark:bg-slate-600 bg-slate-300"
>
<div
className="items-center h-full justify-center flex flex-col space-y-10 p-10 decoration-0"
>
<div className="flex flex-col items-start">
<div className="font-bold text-lg">{title}</div>
<div className="text-sm mt-3">Created: {date}</div>
</div>
<div className="font-semibold">{about}</div>
</div>
</Link>
);
};

#

when i try to go to http://localhost:3000/posts i see the contents of posts for a sec and then get redirected to signin page of next-auth

#

this is when no session is there

uneven island
#

In my opinion, it might not be the middleware flashing the page tbh

bitter ocean
#

then what ?

#

how can middleware allow to show contents of page if no session is there 🤔

uneven island
#

Just in case. Try disabling the middleware

bitter ocean
#

then nothing will happen right ?

#

i will just see the contents

uneven island
#

We trying to fix your flashing page here

#

So im just trynna see where the problem is at

bitter ocean
#

i mean if you disable middleware it will just show the contents of the posts page

#

without redirecting to signin

stuck rune
#

Didn't nextjs docs address this very issue?

#

"prevent flash of unauthenticated content"

#

I'll get it 1 sec

#

Find in page "flash of unauthenticated content"

uneven island
#

Thats for pages?

bitter ocean
#

the component is fully server side

#

no data fetching happening in client anyways

stuck rune
uneven island
stuck rune
#

Yeah I was gonna suggest that

#

Or maybe it caches your previous session the revalidates it at the point it flashes

#

Try clerk

bitter ocean
#

i think it's related so me passing SessionProvider in layout component

#

i am trying few things and i'll let you know if i fix it

uneven island
#

So that shouldn't be an issue

bitter ocean
#

ya issue is with my middleware , it's not working actually at all 🤣

#

prolly i am doing some dumb stuff

uneven island
#

Where is your middleware lol

stuck rune
#

How is middleware not working 🤨

bitter ocean
#

inside app folder

uneven island
#

Middleware should be in the same directory as package.json

#

Hm....

#

It should be at the same level as app folder

stuck rune
#

It should be in ur root dir

bitter ocean
#

ya working fine now , skill issue , i am noob

uneven island
#

😭

stuck rune
uneven island
#

I really was pulling sherlock holmes here

#

Im dumb too

stuck rune
#

@bitter ocean league of legends PTSD flashbacks

bitter ocean
#

stupid logout button was redirecting me to singin page apparently

#

i feel too embarassed to stay online anymore

#

thanks for help @stuck rune @uneven island

#

🙏

uneven island
#

Which was the issue?

#

Middleware or signin button

bitter ocean
#

middleware

#

it wasn't working at all , i commented out my signout button and i was not getting to the signin page 🤣

# 
"use client";

import { signOut, useSession } from "next-auth/react";
import { redirect } from "next/navigation";

export const SignoutButton = () => {
  const { status } = useSession();

  if (status === "unauthenticated") {
    return redirect("/api/auth/signin");
  }

  return (
    <div>
      <button
        onClick={() => {
          console.log("here");
          signOut();
        }}
      >
        Signout
      </button>
    </div>
  );
};
#

so this basically flashed the page on client and then waits for session api to complete and then redirected me

uneven island
#

Anyways mark the answer

bitter ocean
#

how ?

uneven island