feat: auth

Author: gregnr

.env.example

@@ -0,0 +1,3 @@
+SUPABASE_AUTH_GITHUB_CLIENT_ID=github-client-id
+SUPABASE_AUTH_GITHUB_SECRET=github-secret
+SUPABASE_AUTH_GITHUB_REDIRECT_URI=http://localhost:54321/auth/v1/callback

apps/postgres-new/app/globals.css

@@ -138,6 +138,7 @@
   --xxl: 128px;
   --content-width-screen-xl: 1128px;
   --font-family-body: Inter;
+  --radius: 0.5rem;
 }
 
 [data-theme='dark'],

apps/postgres-new/assets/github-icon.tsx

@@ -0,0 +1,13 @@
+import { SVGProps } from 'react'
+
+const GitHubIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 96" width="1em" height="1em" {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default GitHubIcon

apps/postgres-new/components/app-provider.tsx

@@ -0,0 +1,108 @@
+'use client'
+
+/**
+ * Holds global app data like user.
+ */
+
+import { User } from '@supabase/supabase-js'
+import {
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
+import { createClient } from '~/utils/supabase/client'
+
+export type AppProps = PropsWithChildren
+
+export default function AppProvider({ children }: AppProps) {
+  const [isLoadingUser, setIsLoadingUser] = useState(true)
+  const [user, setUser] = useState<User>()
+
+  const supabase = createClient()
+
+  const loadUser = useCallback(async () => {
+    setIsLoadingUser(true)
+    try {
+      const { data, error } = await supabase.auth.getUser()
+
+      if (error) {
+        // TODO: handle error
+        setUser(undefined)
+        return
+      }
+
+      const { user } = data
+
+      setUser(user)
+
+      return user
+    } finally {
+      setIsLoadingUser(false)
+    }
+  }, [supabase])
+
+  useEffect(() => {
+    loadUser()
+  }, [loadUser])
+
+  const signIn = useCallback(async () => {
+    const { error } = await supabase.auth.signInWithOAuth({
+      provider: 'github',
+      options: {
+        redirectTo: window.location.toString(),
+      },
+    })
+
+    if (error) {
+      // TODO: handle sign in error
+    }
+
+    const user = await loadUser()
+    return user
+  }, [supabase, loadUser])
+
+  const signOut = useCallback(async () => {
+    const { error } = await supabase.auth.signOut()
+
+    if (error) {
+      // TODO: handle sign out error
+    }
+
+    setUser(undefined)
+  }, [supabase])
+
+  return (
+    <AppContext.Provider
+      value={{
+        user,
+        isLoadingUser,
+        signIn,
+        signOut,
+      }}
+    >
+      {children}
+    </AppContext.Provider>
+  )
+}
+
+export type AppContextValues = {
+  user?: User
+  isLoadingUser: boolean
+  signIn: () => Promise<User | undefined>
+  signOut: () => Promise<void>
+}
+
+export const AppContext = createContext<AppContextValues | undefined>(undefined)
+
+export function useApp() {
+  const context = useContext(AppContext)
+
+  if (!context) {
+    throw new Error('AppContext missing. Are you accessing useApp() outside of an AppProvider?')
+  }
+
+  return context
+}