feat: add navigation

app/lib/navigation.tsx

@@ -0,0 +1,20 @@
+import { Auth } from "@supabase/ui";
+import Link from "next/link";
+import React from "react";
+
+export function Navigation() {
+  const user = Auth.useUser();
+  return (
+    <div>
+      SupaNews{" "}
+      {user.user === null ? (
+        <Link href="/login">login</Link>
+      ) : (
+        <>
+          <Link href="/account">account</Link>
+          <Link href="/logout">logout</Link>
+        </>
+      )}
+    </div>
+  );
+}

app/lib/supabase.tsx

@@ -4,7 +4,7 @@ import { Auth } from "@supabase/ui";
 
 const SupabaseClientContext = React.createContext<SupabaseClient | null>(null);
 
-export function SupabaseProvider(props: { children: React.ReactElement }) {
+export function SupabaseProvider(props: { children: React.ReactNode }) {
   const [client] = React.useState(() =>
     createClient(
       process.env.NEXT_PUBLIC_SUPABASE_URL!,

app/lib/urql.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { createClient, Provider } from "urql";
 import { useSupabaseClient } from "./supabase";
 
-export function UrqlProvider(props: { children: React.ReactElement }) {
+export function UrqlProvider(props: { children: React.ReactNode }) {
   const supabaseClient = useSupabaseClient();
 
   function getHeaders(): Record<string, string> {

app/pages/_app.tsx

@@ -2,11 +2,13 @@ import "../styles/globals.css";
 import type { AppProps } from "next/app";
 import { UrqlProvider } from "../lib/urql";
 import { SupabaseProvider } from "../lib/supabase";
+import { Navigation } from "../lib/navigation";
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <SupabaseProvider>
       <UrqlProvider>
+        <Navigation />
         <Component {...pageProps} />
       </UrqlProvider>
     </SupabaseProvider>

app/pages/logout.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import type { NextPage } from "next";
+import { Auth } from "@supabase/ui";
+import { useSupabaseClient } from "../lib/supabase";
+import { useRouter } from "next/router";
+
+const LogOut: NextPage = () => {
+  const supabaseClient = useSupabaseClient();
+  const router = useRouter();
+
+  React.useEffect(() => {
+    supabaseClient.auth.signOut().then(() => router.replace("/"));
+  }, []);
+  return null;
+};
+
+export default LogOut;