Merge pull request #425 from supabase/example/nextjs-with-supabase-auth/usercontext-refactor

chore(example/nextjs-with-supabase-auth): Refactor to use user context.

examples/nextjs-with-supabase-auth/README.md

@@ -1,6 +1,6 @@
 # Example: Supabase authentication client- and server-side (API routes)
 
-This example shows how to use Supabase auth both on the client (`useUser` hook) and server in [API routes](https://nextjs.org/docs/api-routes/introduction).
+This example shows how to use Supabase auth both on the client (`useUser` hook from the `UserContext` component) and server in [API routes](https://nextjs.org/docs/api-routes/introduction).
 
 ## Demo
 

examples/nextjs-with-supabase-auth/components/UserContext.js

@@ -0,0 +1,38 @@
+import { useEffect, useState, createContext, useContext } from 'react'
+import { supabase } from '../utils/initSupabase'
+
+export const UserContext = createContext()
+
+export const UserContextProvider = (props) => {
+  const [session, setSession] = useState(null)
+  const [user, setUser] = useState(null)
+
+  useEffect(() => {
+    const session = supabase.auth.session()
+    setSession(session)
+    setUser(session?.user ?? null)
+    const { data: authListener } = supabase.auth.onAuthStateChange(async (event, session) => {
+      setSession(session)
+      setUser(session?.user ?? null)
+    })
+
+    return () => {
+      authListener.unsubscribe()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const value = {
+    session,
+    user,
+  }
+  return <UserContext.Provider value={value} {...props} />
+}
+
+export const useUser = () => {
+  const context = useContext(UserContext)
+  if (context === undefined) {
+    throw new Error(`useUser must be used within a UserContextProvider.`)
+  }
+  return context
+}

examples/nextjs-with-supabase-auth/pages/_app.js

@@ -0,0 +1,9 @@
+import { UserContextProvider } from '../components/UserContext'
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <UserContextProvider>
+      <Component {...pageProps} />
+    </UserContextProvider>
+  )
+}

examples/nextjs-with-supabase-auth/pages/index.js

@@ -1,21 +1,18 @@
-import useSWR from 'swr';
-import { useUser } from '../utils/useUser';
-import { supabase } from '../utils/initSupabase';
-import SupabaseAuth from '../components/SupabaseAuth';
+import useSWR from 'swr'
+import { useUser } from '../components/UserContext'
+import { supabase } from '../utils/initSupabase'
+import SupabaseAuth from '../components/SupabaseAuth'
 
 const fetcher = (url, token) =>
   fetch(url, {
     method: 'GET',
     headers: new Headers({ 'Content-Type': 'application/json', token }),
     credentials: 'same-origin',
-  }).then((res) => res.json());
+  }).then((res) => res.json())
 
 const Index = () => {
-  const { user, session } = useUser();
-  const { data, error } = useSWR(
-    session ? ['/api/getUser', session.access_token] : null,
-    fetcher
-  );
+  const { user, session } = useUser()
+  const { data, error } = useSWR(session ? ['/api/getUser', session.access_token] : null, fetcher)
   if (!user) {
     return (
       <>
@@ -25,7 +22,7 @@ const Index = () => {
           <SupabaseAuth />
         </div>
       </>
-    );
+    )
   }
 
   return (
@@ -54,7 +51,7 @@ const Index = () => {
         <div>Loading...</div>
       )}
     </div>
-  );
-};
+  )
+}
 
-export default Index;
+export default Index

examples/nextjs-with-supabase-auth/utils/useUser.js

@@ -1,27 +0,0 @@
-import { useEffect, useState } from 'react';
-import { supabase } from './initSupabase';
-
-const useUser = () => {
-  const [session, setSession] = useState(null);
-  const [user, setUser] = useState(null);
-
-  useEffect(() => {
-    setSession(supabase.auth.session());
-    setUser(supabase.auth.user());
-    const { data: authListener } = supabase.auth.onAuthStateChange(
-      (event, session) => {
-        console.log(`Supbase auth event: ${event}`);
-        setSession(session);
-        setUser(session?.user ?? null);
-      }
-    );
-    return () => {
-      authListener.unsubscribe();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return { user, session };
-};
-
-export { useUser };