adrianhajdin / collaborative-editor

Learn how to build any collaborative application by building LiveDocs, an improved Google Docs that manages millions of collaborators in real-time.
https://jsm-live-docs.vercel.app
397 stars 104 forks source link

The <SignIn/> component cannot render when a user is already signed in, unless the application allows multiple sessions. Since a user is signed in and this application only allows a single session, Clerk is redirecting to the `afterSignIn` URL instead. (This notice only appears in development) #11

Open Victorosayame opened 2 months ago

Victorosayame commented 2 months ago

i keep getting this error even when i did everything correctly, i also cloned yours,created a new clerk and liveblocks account and still gets the same error.

The component cannot render when a user is already signed in, unless the application allows multiple sessions. Since a user is signed in and this application only allows a single session, Clerk is redirecting to the afterSignIn URL instead. (This notice only appears in development) Screenshot (74) Screenshot (74) Screenshot (74)

FrBosquet commented 2 months ago

I have the same issue. Please help, is so annoying

AbhinavSharma486 commented 2 months ago

I have the same issue. Please help, is so annoying

i also have same issue

jordanskizash commented 2 months ago

Same issue, only in development.

FrBosquet commented 2 months ago

I solved it for my case:

For some reason the sign in page is being sent to the client without an user before hydration, after hydration there is an user and thats where the issue happens.

shabazs453 commented 1 month ago

@FrBosquet , can you sent your sign in component's code? please.

shabazs453 commented 1 month ago

@FrBosquet I changed my middleware file to following

*import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server"; const isPublicRoute = createRouteMatcher(["/sign-in(.)", "/sign-up(.*)"]);

export default clerkMiddleware((auth, request) => { if (!isPublicRoute(request)) { auth().protect(); } });

export const config = { matcher: [ // Skip Next.js internals and all static files, unless found in search params "/((?!_next|[^?]\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).)", // Always run for API routes "/(api|trpc)(.*)", ], };**

It checks user authentication on server side itself.

So I removed the redirect to sign-in page from home page and changed it to return null.

import Link from "next/link"; import { redirect } from "next/navigation";

const Home = async () => { const clerkUser = await currentUser(); if (!clerkUser) return null;

const roomDocuments = await getDocuments( clerkUser?.emailAddresses[0]?.emailAddress );

Also you have to correctly synchronize the system time to actual time since tokens do not work properly when being passed to clerk server.