Supabase Oauth with Remix errors on redirect "You are trying to use a blocker on a POP navigation"

After I sign in with a 3rd party auth provider using Supabase Auth, I am not seeing what I should be seeing, that is data visible to authenticated users only. Moreover, I am getting this warning in my console

> You are trying to use a blocker on a POP navigation to a location that
> was not created by @remix-run/router. This will fail silently in
> production. This can happen if you are navigating outside the router
> via window.history.pushState/window.location.hash instead of using
> router navigation APIs. This can also happen if you are using
> createHashRouter and the user manually changes the URL.

Now this is puzzling.

Here's where I call supabase auth:

// login.tsx
import { useOutletContext } from '@remix-run/react';

import type { SupabaseOutletContext } from '~/root';

export function Login() {
	const { supabase } = useOutletContext<SupabaseOutletContext>();

	async function handleLogin() {
		return (await supabase).auth.signInWithOAuth({
			provider: 'github',
		});
	}

	const handleLogout = async () => {
		const { error } = await supabase.auth.signOut();
		if (error) {
			console.log(error);
		}
	};

	return (
		<div>
			<h1>Login</h1>
			<button onClick={handleLogin}>Login</button>
			<button onClick={handleLogout}>Logout</button>
		</div>
	);
}

// root.tsx
// ...
import { createClient } from '@supabase/supabase-js';

import type { SupabaseClient } from '@supabase/supabase-js';
// ...
type TypedSupabaseClient = SupabaseClient<Database>;
export type SupabaseOutletContext = {
	supabase: TypedSupabaseClient;
};

// ...

export const loader = ({}: LoaderArgs) => {
	const env = {
		SUPABASE_URL: process.env.SUPABASE_URL!,
		SUPABASE_ANON_KEY: process.env.SUPABASE_ANON_KEY!,
	};

	return json({ env });
};

export default function App() {
	const { env } = useLoaderData<typeof loader>();

	const [supabase] = useState(() =>
		createClient<Database>(env.SUPABASE_URL!, env.SUPABASE_ANON_KEY!)
	);

	return (
		{/* ... */}
				<Outlet context={{ supabase }} />
		{/* ... */}	);
}

Finally, index.tsx

import type { LoaderArgs } from '@remix-run/node';

import { useLoaderData } from '@remix-run/react';
import { Login } from 'components/login';
import supabase from 'utils/supabase.server';

export const loader = async ({}: LoaderArgs) => {
    // uses RLS
	const { data } = await supabase.from('messages').select('*');

	return { messages: data ?? [] };
};

export default function Index() {
	const { messages } = useLoaderData<typeof loader>();
	return (
		<>
			<Login />
			<pre>{JSON.stringify({ messages }, null, 2)}</pre>
		</>
	);
}

Why on Earth am I getting this warning? Why am I not authenticated? It was meant to be this simple app to check out supabase. What to do to fix the warning?

Versions of packages:

    "@remix-run/node": "1.12.0",
    "@remix-run/react": "1.12.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "@supabase/supabase-js": "^2.7.1"

Edit 1:
I shared the code in a public repo https://github.com/jessaleks/supabase-remix-debug-repo

This is a warning that appears when running locally, as Supabase redirects after receiving a token from the successful OAuth process with GitHub. Remix (or React Router) are just logging a warning to tell you that you redirected without using their router, as the application code you are writing should use their router for redirects and things. In the case of Supabase doing this during the auth process, it is safe to ignore 👍