OAuth login flow with TanStack router

I'm trying to implement OAuth and I want to understand the correct pattern/how to approach this in the context of the router.

I have an AuthProvider component wrapping the router:

function InnerApp({ router }: AppProps) {
    const auth = useAuth();
    return (
        <>
            <RouterProvider router={router} context={{ auth }} />
        </>
    );
}

const App = ({ router }: AppProps): FunctionComponent => {
    return (
        <AuthProvider>
            <QueryClientProvider client={queryClient}>
                <InnerApp router={router} />
            </QueryClientProvider>
        </AuthProvider>
    );
};

function InnerApp({ router }: AppProps) {
    const auth = useAuth();
    return (
        <>
            <RouterProvider router={router} context={{ auth }} />
        </>
    );
}

const App = ({ router }: AppProps): FunctionComponent => {
    return (
        <AuthProvider>
            <QueryClientProvider client={queryClient}>
                <InnerApp router={router} />
            </QueryClientProvider>
        </AuthProvider>
    );
};

The AuthProvider contains an

isAuthenticated

isAuthenticated

value, also it internally contains functions to do the following: 1. Redirect to the external OAuth Login Page. 2. Detect whether the user is authenticated. 3. Handle the redirect back from the OAuth callback (save the token, etc).

My question is: where should I be calling those functions from? Should they be in an effect hook in the AuthProvider component, in the beforeLoad callback for all my routes, or somewhere else?

TanStack•2y ago•

4 replies

worthy-azure

OAuth login flow with TanStack router

I'm trying to implement OAuth and I want to understand the correct pattern/how to approach this in the context of the router.

I have an AuthProvider component wrapping the router:

function InnerApp({ router }: AppProps) {
    const auth = useAuth();
    return (
        <>
            <RouterProvider router={router} context={{ auth }} />
        </>
    );
}

const App = ({ router }: AppProps): FunctionComponent => {
    return (
        <AuthProvider>
            <QueryClientProvider client={queryClient}>
                <InnerApp router={router} />
            </QueryClientProvider>
        </AuthProvider>
    );
};

function InnerApp({ router }: AppProps) {
    const auth = useAuth();
    return (
        <>
            <RouterProvider router={router} context={{ auth }} />
        </>
    );
}

const App = ({ router }: AppProps): FunctionComponent => {
    return (
        <AuthProvider>
            <QueryClientProvider client={queryClient}>
                <InnerApp router={router} />
            </QueryClientProvider>
        </AuthProvider>
    );
};

The AuthProvider contains an

isAuthenticated

isAuthenticated

OAuth login flow with TanStack router

Similar Threads

OAuth login flow with TanStack router

Similar Threads

Similar Threads

Similar Threads