Where should I put supabase.auth.onAuthStateChange?

Hi,
I'm trying to implement

supabase.auth.onAuthStateChange

supabase.auth.onAuthStateChange

into the client since supabase does not recommend using

getSession()

getSession()

in the BE and

getUser()

getUser()

does not include the custom claims in the token.

To implement the subscription, is there any recommended pattern? Right now I can think of
1) Using React Context - I already implemented this for ThemeProvider (shadcn). Then I wrapped the context around children in RootDocument.

function RootDocument({ children }: { children: React.ReactNode }) {
    return (
        <html>
            <head>
                <HeadContent />
            </head>
            <body>
                <ThemeProvider>{children}</ThemeProvider>
                {/* <TanStackRouterDevtools position="bottom-right" /> */}
                <Scripts />
            </body>
        </html>
    );
}

function RootDocument({ children }: { children: React.ReactNode }) {
    return (
        <html>
            <head>
                <HeadContent />
            </head>
            <body>
                <ThemeProvider>{children}</ThemeProvider>
                {/* <TanStackRouterDevtools position="bottom-right" /> */}
                <Scripts />
            </body>
        </html>
    );
}

Is there any other potential ways? I'm not sure how we can implement subscription in tanstack start router - i'm not sure if we can implement like React Context/Hooks in Router

Router Context | TanStack Router React Docs

TanStack Router's router context is a very powerful tool that can be used for dependency injection among many other things. Aptly named, the router context is passed through the router and down throug...

TanStack•9mo ago•

42 replies

hurt-tomato

Where should I put supabase.auth.onAuthStateChange?

Hi,
I'm trying to implement

supabase.auth.onAuthStateChange

supabase.auth.onAuthStateChange

into the client since supabase does not recommend using

getSession()

getSession()

in the BE and

getUser()

getUser()

function RootDocument({ children }: { children: React.ReactNode }) {
    return (
        <html>
            <head>
                <HeadContent />
            </head>
            <body>
                <ThemeProvider>{children}</ThemeProvider>
                {/* <TanStackRouterDevtools position="bottom-right" /> */}
                <Scripts />
            </body>
        </html>
    );
}

function RootDocument({ children }: { children: React.ReactNode }) {
    return (
        <html>
            <head>
                <HeadContent />
            </head>
            <body>
                <ThemeProvider>{children}</ThemeProvider>
                {/* <TanStackRouterDevtools position="bottom-right" /> */}
                <Scripts />
            </body>
        </html>
    );
}

Is there any other potential ways? I'm not sure how we can implement subscription in tanstack start router - i'm not sure if we can implement like React Context/Hooks in Router

Router Context | TanStack Router React Docs

Where should I put supabase.auth.onAuthStateChange?

Similar Threads

Where should I put supabase.auth.onAuthStateChange?

Similar Threads

Similar Threads

Similar Threads