collaborative-editor icon indicating copy to clipboard operation
collaborative-editor copied to clipboard

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)

Open Victorosayame opened this issue 1 year ago • 7 comments

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 <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) Screenshot (74) Screenshot (74) Screenshot (74)

Victorosayame avatar Aug 09 '24 08:08 Victorosayame

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

FrBosquet avatar Aug 31 '24 09:08 FrBosquet

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

i also have same issue

AbhinavSharma486 avatar Sep 02 '24 18:09 AbhinavSharma486

Same issue, only in development.

jordanskizash avatar Sep 02 '24 21:09 jordanskizash

I solved it for my case:

  • Turned my sign in component to a client side one, using 'use client'
  • Check if there is an user with useUser, redirect to my private dashboard if positive
  • Show the log in component other-wise

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.

FrBosquet avatar Sep 03 '24 07:09 FrBosquet

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

shabazs453 avatar Sep 22 '24 13:09 shabazs453

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

shabazs453 avatar Sep 22 '24 16:09 shabazs453

Adjust your system time correctly according to your time zone in your settings, worked for me

Pratik1805 avatar Dec 21 '24 17:12 Pratik1805