3️⃣ 3.2 My Account Screen + AuthGate

apps/next/pages/account.tsx

@@ -0,0 +1 @@
+export { default } from 'app/features/auth/my-account/screen'

packages/app/features/auth/firebase/init.native.ts

@@ -11,7 +11,7 @@ const signInAnonymously: Firebase['signInAnonymously'] = async () => {
 }
 
 const onAuthStateChanged: Firebase['onAuthStateChanged'] = (callback) => {
-  return auth().onIdTokenChanged(callback)
+  return auth().onAuthStateChanged(callback)
 }
 
 const getCurrentUser: Firebase['getCurrentUser'] = () => auth().currentUser

packages/app/features/auth/firebase/init.web.ts

@@ -1,18 +1,19 @@
+// please note that firebase auth adds about 30kb to your bundle size on Web
 import { initializeApp } from 'firebase/app'
 import {
   initializeAuth,
   browserPopupRedirectResolver,
   browserLocalPersistence,
   signInAnonymously as signInAnonymouslyFirebase,
-  onIdTokenChanged as onIdTokenChangedFirebase,
+  onAuthStateChanged as onAuthStateChangedFirebase,
 } from 'firebase/auth'
 import { Firebase } from './types'
 
 let auth: ReturnType<typeof initializeAuth>
 
 if (typeof window !== 'undefined') {
   const firebaseApp = initializeApp({
-    // REPLACE THIS WITH YOUR AUTH CONFIG
+    // TODO REPLACE THIS WITH YOUR AUTH CONFIG
     apiKey: 'AIzaSyAQZ1A-bJMQqjdzNQhRPkbA7swEFnwUS_w',
     authDomain: 'solito-example.firebaseapp.com',
     projectId: 'solito-example',
@@ -37,7 +38,7 @@ const signInAnonymously: Firebase['signInAnonymously'] = async () => {
 }
 
 const onAuthStateChanged: Firebase['onAuthStateChanged'] = (callback) => {
-  return onIdTokenChangedFirebase(auth, callback)
+  return onAuthStateChangedFirebase(auth, callback)
 }
 
 const getCurrentUser: Firebase['getCurrentUser'] = () => auth.currentUser

packages/app/features/auth/gate/index.tsx

@@ -0,0 +1,30 @@
+import { Text, View } from '@dripsy/core'
+import { useAuth } from '../context'
+import { signInAnonymously } from '../firebase'
+
+export function AuthGate({
+  children,
+}: {
+  children: React.ReactNode | ((user: { uid: string }) => React.ReactNode)
+}) {
+  const auth = useAuth()
+
+  if (!auth) {
+    return (
+      <>
+        <View
+          sx={{
+            bg: '$background',
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Text onPress={signInAnonymously}>Sign In</Text>
+        </View>
+      </>
+    )
+  }
+
+  return <>{typeof children == 'function' ? children(auth) : children}</>
+}

packages/app/features/auth/my-account/screen.tsx

@@ -0,0 +1,25 @@
+import { Text, View } from 'dripsy'
+import { signOut } from '../firebase'
+import { AuthGate } from '../gate'
+
+export default function MyAccountScreen() {
+  return (
+    <AuthGate>
+      {({ uid }) => (
+        <View
+          sx={{
+            flex: 1,
+            bg: '$background',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Text>Welcome, {uid}.</Text>
+          <Text sx={{ mt: '$3', color: '#F04F88' }} onPress={signOut}>
+            Sign Out
+          </Text>
+        </View>
+      )}
+    </AuthGate>
+  )
+}

packages/app/layout/web/index.tsx

@@ -18,12 +18,17 @@ const tabs: Array<{
     isActive: (pathname) => pathname.startsWith('/users'),
     name: 'Users',
   },
+  {
+    pathname: '/account',
+    isActive: (pathname) => pathname.startsWith('/account'),
+    name: 'My Account',
+  },
 ]
 
 const height = 34
 
 // this will only run on Web
-export function WebLayout({ children }) {
+export function WebLayout({ children }: { children: React.ReactNode }) {
   const { pathname } = useRouter()
   return (
     <>