feat(react): add react integration package (@aura-stack/react)

.vscode/settings.json

@@ -1,5 +1,23 @@
 {
   "editor.formatOnSave": true,
-  "oxc.fmt.configPath": ".oxfmtrc.json",
-  "editor.defaultFormatter": "oxc.oxc-vscode"
+  "oxc.fmt.configPath": "./.oxfmtrc.json",
+  "editor.defaultFormatter": "oxc.oxc-vscode",
+  "[javascript]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  }
 }

apps/astro/package.json

@@ -17,6 +17,7 @@
     "@astrojs/node": "^10.0.2",
     "@astrojs/react": "^5.0.0",
     "@aura-stack/auth": "workspace:*",
+    "@aura-stack/react": "workspace:*",
     "@radix-ui/react-slot": "^1.2.4",
     "astro": "^6.0.5",
     "lucide-react": "catalog:lucide-react",

apps/astro/src/components/auth-client.tsx

@@ -1,10 +1,12 @@
 import { LayoutDashboard } from "lucide-react"
-import { useAuth, AuthProvider } from "@/contexts/auth"
 import { Button } from "@/components/ui/button"
+import { useAuth } from "@aura-stack/react"
+import { AuthProvider } from "@/contexts/auth"
 import type { Session } from "@aura-stack/auth"
 
 const AuthClientContent = () => {
-    const { session, isAuthenticated, isLoading, signIn, signOut } = useAuth()
+    const { session, status, isPending, signIn, signOut } = useAuth()
+    const isAuthenticated = status === "authenticated"
 
     return (
         <div className="w-full p-6 pr-3 bg-black md:py-10">
@@ -34,7 +36,7 @@ const AuthClientContent = () => {
                                     <span className="text-white/60 truncate max-w-37.5">{session?.user?.sub}</span>
                                 </div>
                             </div>
-                            <Button type="button" variant="outline" size="sm" disabled={isLoading} onClick={() => signOut()}>
+                            <Button type="button" variant="outline" size="sm" disabled={isPending} onClick={() => signOut()}>
                                 Sign Out
                             </Button>
                         </div>
@@ -54,7 +56,7 @@ const AuthClientContent = () => {
                                             className="w-full rounded-none"
                                             variant="outline"
                                             size="sm"
-                                            disabled={isLoading}
+                                            disabled={isPending}
                                             onClick={() => signIn(provider.toLowerCase())}
                                         >
                                             Sign In with {provider}
@@ -72,7 +74,7 @@ const AuthClientContent = () => {
 
 export const AuthClient = (props: { session?: Session | null }) => {
     return (
-        <AuthProvider session={props.session}>
+        <AuthProvider initialSession={props.session}>
             <AuthClientContent />
         </AuthProvider>
     )

apps/astro/src/components/header.tsx

@@ -1,12 +1,14 @@
 import { useState } from "react"
 import { Menu, X } from "lucide-react"
 import { Button } from "@/components/ui/button"
-import { useAuth, AuthProvider } from "@/contexts/auth"
+import { useAuth } from "@aura-stack/react"
+import { AuthProvider } from "@/contexts/auth"
 import type { Session } from "@aura-stack/auth"
 
 const HeaderContent = () => {
     const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
-    const { isAuthenticated, isLoading, signOut, signIn } = useAuth()
+    const { status, isPending, signOut, signIn } = useAuth()
+    const isAuthenticated = status === "authenticated"
 
     const handleSignOut = async () => {
         await signOut()
@@ -103,7 +105,7 @@ const HeaderContent = () => {
                             Discord
                         </a>
                         <div className="flex flex-col gap-2 pt-4 border-t border-gray-800/50">
-                            {!isLoading && !isAuthenticated && (
+                            {!isPending && !isAuthenticated && (
                                 <Button type="button" onClick={() => signIn("github")}>
                                     Sign in with GitHub
                                 </Button>
@@ -125,7 +127,7 @@ const HeaderContent = () => {
 
 export const Header = (props: { session?: Session }) => {
     return (
-        <AuthProvider session={props.session}>
+        <AuthProvider initialSession={props.session}>
             <HeaderContent />
         </AuthProvider>
     )

apps/astro/src/contexts/auth.tsx

@@ -1,62 +1,10 @@
-import { createContext, use, useState, useEffect } from "react"
+import { AuthProvider as AuraAuthProvider, type AuthProviderProps } from "@aura-stack/react"
 import { authClient } from "@/lib/client"
-import type { Session, LiteralUnion, BuiltInOAuthProvider, SignInOptions, SignOutOptions } from "@aura-stack/auth"
-import type { AuthProviderProps } from "@/@types/props"
-import type { AuthContextValue } from "@/@types/types"
 
-export const AuthContext = createContext<AuthContextValue | undefined>(undefined)
-
-export const AuthProvider = ({ children, session: defaultSession }: AuthProviderProps) => {
-    const [isLoading, setIsLoading] = useState(defaultSession === undefined)
-    const [session, setSession] = useState<Session | null>(defaultSession ?? null)
-    const isAuthenticated = Boolean(session?.user)
-
-    const signIn = async (provider: LiteralUnion<BuiltInOAuthProvider>, options?: SignInOptions) => {
-        setIsLoading(true)
-        try {
-            return await authClient.signIn(provider, options)
-        } finally {
-            setIsLoading(false)
-        }
-    }
-
-    const signOut = async (options?: SignOutOptions) => {
-        setIsLoading(true)
-        try {
-            const value = await authClient.signOut(options)
-            setSession(null)
-            return value
-        } finally {
-            setIsLoading(false)
-        }
-    }
-
-    useEffect(() => {
-        if (defaultSession !== undefined) {
-            setSession(defaultSession)
-            setIsLoading(false)
-            return
-        }
-        const fetchSession = async () => {
-            try {
-                const session = await authClient.getSession()
-                setSession(session)
-            } catch {
-                setSession(null)
-            } finally {
-                setIsLoading(false)
-            }
-        }
-        fetchSession()
-    }, [defaultSession])
-
-    return <AuthContext value={{ session, isAuthenticated, isLoading, signIn, signOut }}>{children}</AuthContext>
-}
-
-export const useAuth = () => {
-    const ctx = use(AuthContext)
-    if (!ctx) {
-        throw new Error("useAuth must be used within an AuthProvider")
-    }
-    return ctx
+export const AuthProvider = ({ children, initialSession }: Omit<AuthProviderProps, "client">) => {
+    return (
+        <AuraAuthProvider client={authClient} initialSession={initialSession}>
+            {children}
+        </AuraAuthProvider>
+    )
 }

apps/astro/tsconfig.json

@@ -7,7 +7,6 @@
     "jsxImportSource": "react",
     "paths": {
       "@/*": ["./src/*"]
-    },
-    "baseUrl": "./"
+    }
   }
 }

apps/nextjs/app-router/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@aura-stack/auth": "workspace:*",
+    "@aura-stack/react": "workspace:*",
     "@radix-ui/react-slot": "^1.2.4",
     "lucide-react": "catalog:lucide-react",
     "next": "catalog:next",

apps/nextjs/app-router/src/app/layout.tsx

@@ -1,9 +1,9 @@
 import { Geist, Geist_Mono } from "next/font/google"
 import { Header } from "@/components/header"
-import { AuthProvider } from "@/contexts/auth"
 import { Footer } from "@/components/footer"
 import { metadataInfo } from "@/lib/metadata"
-import "./globals.css"
+import { AuthProvider } from "@/contexts/auth"
+import "@/app/globals.css"
 
 const geistSans = Geist({
     variable: "--font-geist-sans",

apps/nextjs/app-router/src/components/auth-client.tsx

@@ -1,11 +1,12 @@
 "use client"
 
-import { useAuth } from "@/contexts/auth"
 import { LayoutDashboard } from "lucide-react"
 import { Button } from "./ui/button"
+import { useAuth } from "@aura-stack/react/hooks"
 
 export const AuthClient = () => {
-    const { session, isAuthenticated, isLoading, signIn, signOut } = useAuth()
+    const { session, status, isPending, signIn, signOut } = useAuth()
+    const isAuthenticated = status === "authenticated"
 
     return (
         <div className="w-full p-6 pr-3 bg-black md:py-10">
@@ -35,7 +36,7 @@ export const AuthClient = () => {
                                     <span className="text-white/60 truncate max-w-37.5">{session?.user?.sub}</span>
                                 </div>
                             </div>
-                            <Button type="button" variant="outline" size="sm" disabled={isLoading} onClick={() => signOut()}>
+                            <Button type="button" variant="outline" size="sm" disabled={isPending} onClick={() => signOut()}>
                                 Sign Out
                             </Button>
                         </div>
@@ -55,7 +56,7 @@ export const AuthClient = () => {
                                             className="w-full rounded-none"
                                             variant="outline"
                                             size="sm"
-                                            disabled={isLoading}
+                                            disabled={isPending}
                                             onClick={() => signIn(provider.toLowerCase())}
                                         >
                                             Sign In with {provider}

apps/nextjs/app-router/src/components/header.tsx

@@ -3,12 +3,13 @@
 import Link from "next/link"
 import { useState } from "react"
 import { Menu, X } from "lucide-react"
-import { useAuth } from "@/contexts/auth"
 import { Button } from "@/components/ui/button"
+import { useAuth } from "@aura-stack/react"
 
 export const Header = () => {
     const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
-    const { isAuthenticated, isLoading, signOut, signIn } = useAuth()
+    const { status, isPending, signOut, signIn } = useAuth()
+    const isAuthenticated = status === "authenticated"
 
     const handleSignOut = async () => {
         await signOut()
@@ -102,7 +103,7 @@ export const Header = () => {
                             Discord
                         </a>
                         <div className="flex flex-col gap-2 pt-4 border-t border-gray-800/50">
-                            {!isLoading && !isAuthenticated && (
+                            {!isPending && !isAuthenticated && (
                                 <Button type="button" onClick={handleSignIn}>
                                     Sign in with GitHub
                                 </Button>

apps/nextjs/app-router/src/contexts/auth.tsx

@@ -1,76 +1,11 @@
 "use client"
-
-import { createContext, use, useState, useEffect } from "react"
+import { AuthProvider as AuraAuthProvider, type AuthProviderProps } from "@aura-stack/react"
 import { authClient } from "@/lib/auth-client"
-import type { Session, LiteralUnion, BuiltInOAuthProvider, SignInOptions, SignOutOptions } from "@aura-stack/auth"
-import type { AuthContextValue } from "@/@types/types"
-import type { AuthProviderProps } from "@/@types/props"
-
-export const AuthContext = createContext<AuthContextValue | undefined>(undefined)
-
-export const AuthProvider = ({ children, session: defaultSession }: AuthProviderProps) => {
-    const [isLoading, setIsLoading] = useState(defaultSession === undefined)
-    const [session, setSession] = useState<Session | null>(defaultSession ?? null)
-    const isAuthenticated = Boolean(session?.user)
-
-    const signIn = async (provider: LiteralUnion<BuiltInOAuthProvider>, options?: SignInOptions) => {
-        setIsLoading(true)
-        try {
-            return await authClient.signIn(provider, { redirect: true, ...options })
-        } finally {
-            setIsLoading(false)
-        }
-    }
-
-    const signOut = async (options?: SignOutOptions) => {
-        setIsLoading(true)
-        try {
-            const value = await authClient.signOut(options)
-            setSession(null)
-            return value
-        } finally {
-            setIsLoading(false)
-        }
-    }
-
-    useEffect(() => {
-        if (defaultSession !== undefined) {
-            setSession(defaultSession)
-            setIsLoading(false)
-            return
-        }
-        const fetchSession = async () => {
-            try {
-                const session = await authClient.getSession()
-                setSession(session)
-            } catch {
-                setSession(null)
-            } finally {
-                setIsLoading(false)
-            }
-        }
-        fetchSession()
-    }, [defaultSession])
 
+export const AuthProvider = ({ children, initialSession }: Omit<AuthProviderProps, "client">) => {
     return (
-        <AuthContext
-            value={{
-                session,
-                isAuthenticated,
-                isLoading,
-                signIn,
-                signOut,
-            }}
-        >
+        <AuraAuthProvider client={authClient} initialSession={initialSession}>
             {children}
-        </AuthContext>
+        </AuraAuthProvider>
     )
 }
-
-export const useAuth = () => {
-    const ctx = use(AuthContext)
-    if (!ctx) {
-        throw new Error("useAuth must be used within an AuthProvider")
-    }
-    return ctx
-}

apps/nextjs/pages-router/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@aura-stack/auth": "workspace:*",
+    "@aura-stack/react": "workspace:*",
     "@radix-ui/react-slot": "^1.2.4",
     "lucide-react": "catalog:lucide-react",
     "next": "catalog:next",

apps/nextjs/pages-router/src/components/auth-client.tsx

@@ -1,9 +1,10 @@
-import { useAuth } from "@/contexts/auth"
 import { LayoutDashboard } from "lucide-react"
 import { Button } from "./ui/button"
+import { useAuth } from "@aura-stack/react"
 
 export const AuthClient = () => {
-    const { session, isAuthenticated, isLoading, signIn, signOut } = useAuth()
+    const { session, status, isPending, signIn, signOut } = useAuth()
+    const isAuthenticated = status === "authenticated"
 
     return (
         <div className="w-full p-6 bg-black md:py-10">
@@ -33,7 +34,7 @@ export const AuthClient = () => {
                                     <span className="text-white/60 truncate max-w-37.5">{session?.user?.sub}</span>
                                 </div>
                             </div>
-                            <Button type="button" variant="outline" size="sm" disabled={isLoading} onClick={() => signOut()}>
+                            <Button type="button" variant="outline" size="sm" disabled={isPending} onClick={() => signOut()}>
                                 Sign Out
                             </Button>
                         </div>
@@ -53,7 +54,7 @@ export const AuthClient = () => {
                                             className="w-full rounded-none"
                                             variant="outline"
                                             size="sm"
-                                            disabled={isLoading}
+                                            disabled={isPending}
                                             onClick={() => signIn(provider.toLowerCase())}
                                         >
                                             Sign In with {provider}