3️⃣ 3.1 Auth credentials + context

apps/expo/app.config.ts

@@ -0,0 +1,33 @@
+import { ExpoConfig } from '@expo/config'
+
+// you can delete this function once you add your own google creds
+const checkIfAndroidConfigIsUpdated = () => {
+  const android = require('./google/google-services.json')
+
+  if (android.project_info.project_number == '960783729432') {
+    console.warn(`You need to add your own Firebase credentials. Make sure you edit the following:
+    
+- apps/expo/google/google-services.json
+- apps/expo/google/GoogleService-Info.plist
+- packages/app/features/auth/firebase/init.web.ts
+
+`)
+  }
+}
+checkIfAndroidConfigIsUpdated()
+
+export default {
+  name: 'solito-next-conf',
+  slug: 'solito-next-conf',
+  version: '1.0.0',
+  scheme: 'solito-next-conf',
+  platforms: ['ios', 'android'],
+  ios: {
+    bundleIdentifier: 'com.solito.next-conf',
+    googleServicesFile: './google/GoogleService-Info.plist',
+  },
+  android: {
+    package: 'com.solito.nextconf',
+    googleServicesFile: './google/google-services.json',
+  },
+} as ExpoConfig

apps/expo/google/GoogleService-Info.plist

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CLIENT_ID</key>
+	<string>960783729432-oi7vjohmsjmmchok1410771rakkpkh6m.apps.googleusercontent.com</string>
+	<key>REVERSED_CLIENT_ID</key>
+	<string>com.googleusercontent.apps.960783729432-oi7vjohmsjmmchok1410771rakkpkh6m</string>
+	<key>API_KEY</key>
+	<string>AIzaSyD_YOZWJkoezJ5lYJUnhg0xrACJRe6neFQ</string>
+	<key>GCM_SENDER_ID</key>
+	<string>960783729432</string>
+	<key>PLIST_VERSION</key>
+	<string>1</string>
+	<key>BUNDLE_ID</key>
+	<string>com.solito.next-conf</string>
+	<key>PROJECT_ID</key>
+	<string>solito-example</string>
+	<key>STORAGE_BUCKET</key>
+	<string>solito-example.appspot.com</string>
+	<key>IS_ADS_ENABLED</key>
+	<false></false>
+	<key>IS_ANALYTICS_ENABLED</key>
+	<false></false>
+	<key>IS_APPINVITE_ENABLED</key>
+	<true></true>
+	<key>IS_GCM_ENABLED</key>
+	<true></true>
+	<key>IS_SIGNIN_ENABLED</key>
+	<true></true>
+	<key>GOOGLE_APP_ID</key>
+	<string>1:960783729432:ios:65ff683ec3df1446b3146d</string>
+</dict>
+</plist>

apps/expo/google/google-services.json

@@ -0,0 +1,46 @@
+{
+  "project_info": {
+    "project_number": "960783729432",
+    "project_id": "solito-example",
+    "storage_bucket": "solito-example.appspot.com"
+  },
+  "client": [
+    {
+      "client_info": {
+        "mobilesdk_app_id": "1:960783729432:android:df8aeb26500d4a79b3146d",
+        "android_client_info": {
+          "package_name": "com.solito.nextconf"
+        }
+      },
+      "oauth_client": [
+        {
+          "client_id": "960783729432-d9gs06vgugdegpjraa5mb6hclntu68tq.apps.googleusercontent.com",
+          "client_type": 3
+        }
+      ],
+      "api_key": [
+        {
+          "current_key": "AIzaSyAqPvxTjO2tkgNzYjXeq1h_wAh9XUAdhFs"
+        }
+      ],
+      "services": {
+        "appinvite_service": {
+          "other_platform_oauth_client": [
+            {
+              "client_id": "960783729432-d9gs06vgugdegpjraa5mb6hclntu68tq.apps.googleusercontent.com",
+              "client_type": 3
+            },
+            {
+              "client_id": "960783729432-oi7vjohmsjmmchok1410771rakkpkh6m.apps.googleusercontent.com",
+              "client_type": 2,
+              "ios_info": {
+                "bundle_id": "com.solito.next-conf"
+              }
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "configuration_version": "1"
+}

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

@@ -0,0 +1,32 @@
+import { createContext, useContext, useSyncExternalStore } from 'react'
+import { getCurrentUser, onAuthStateChanged } from '../firebase'
+import { Firebase } from '../firebase/types'
+
+const AuthContext = createContext<null | { uid: string }>(null)
+
+export function AuthProvider({
+  children,
+  ...props
+}: {
+  children: React.ReactNode
+  onAuthStateChanged?: Parameters<Firebase['onAuthStateChanged']>[0]
+}) {
+  const store = useSyncExternalStore(
+    (callback) => {
+      const remove = onAuthStateChanged((user) => {
+        callback()
+        props.onAuthStateChanged?.(user)
+      })
+
+      return () => remove()
+    },
+    getCurrentUser,
+    () => null
+  )
+
+  return <AuthContext.Provider value={store}>{children}</AuthContext.Provider>
+}
+
+export function useAuth() {
+  return useContext(AuthContext)
+}

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

@@ -10,8 +10,16 @@ const signInAnonymously: Firebase['signInAnonymously'] = async () => {
   return (await auth().signInAnonymously()).user
 }
 
-const onIdTokenChanged: Firebase['onIdTokenChanged'] = (callback) => {
+const onAuthStateChanged: Firebase['onAuthStateChanged'] = (callback) => {
   return auth().onIdTokenChanged(callback)
 }
 
-export { getIsSignedIn, signOut, signInAnonymously, onIdTokenChanged }
+const getCurrentUser: Firebase['getCurrentUser'] = () => auth().currentUser
+
+export {
+  getIsSignedIn,
+  signOut,
+  signInAnonymously,
+  onAuthStateChanged,
+  getCurrentUser,
+}

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

@@ -13,6 +13,12 @@ let auth: ReturnType<typeof initializeAuth>
 if (typeof window !== 'undefined') {
   const firebaseApp = initializeApp({
     // REPLACE THIS WITH YOUR AUTH CONFIG
+    apiKey: 'AIzaSyAQZ1A-bJMQqjdzNQhRPkbA7swEFnwUS_w',
+    authDomain: 'solito-example.firebaseapp.com',
+    projectId: 'solito-example',
+    storageBucket: 'solito-example.appspot.com',
+    messagingSenderId: '960783729432',
+    appId: '1:960783729432:web:f2052cb298f0fc7bb3146d',
   })
 
   auth = initializeAuth(firebaseApp, {
@@ -30,8 +36,16 @@ const signInAnonymously: Firebase['signInAnonymously'] = async () => {
   return (await signInAnonymouslyFirebase(auth)).user
 }
 
-const onIdTokenChanged: Firebase['onIdTokenChanged'] = (callback) => {
+const onAuthStateChanged: Firebase['onAuthStateChanged'] = (callback) => {
   return onIdTokenChangedFirebase(auth, callback)
 }
 
-export { getIsSignedIn, signInAnonymously, signOut, onIdTokenChanged }
+const getCurrentUser: Firebase['getCurrentUser'] = () => auth.currentUser
+
+export {
+  getIsSignedIn,
+  signInAnonymously,
+  signOut,
+  onAuthStateChanged,
+  getCurrentUser,
+}

packages/app/features/auth/firebase/types.ts

@@ -1,10 +1,13 @@
 import type * as firebase from 'firebase/auth'
 
+type User = Pick<firebase.User, 'uid'>
+
 export type Firebase = {
   getIsSignedIn: () => boolean
-  signInAnonymously: () => Promise<Pick<firebase.User, 'uid'>>
+  signInAnonymously: () => Promise<User>
   signOut: () => Promise<void>
-  onIdTokenChanged: (
+  onAuthStateChanged: (
     callback: (user: { uid: string } | null) => void
   ) => () => void
+  getCurrentUser: () => User | null
 }

packages/app/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "dripsy": "^3.6.0",
     "expo-linking": "^3.0.0",
-    "firebase": "^9.11.0",
+    "firebase": "9.10.0",
     "moti": "0.19.0-alpha.6",
     "react-native-reanimated": "2.9.1",
     "solito": "latest"

packages/app/provider/index.tsx

@@ -1,5 +1,10 @@
+import { AuthProvider } from 'app/features/auth/context'
 import { Dripsy } from './dripsy'
 
 export function Provider({ children }: { children: React.ReactNode }) {
-  return <Dripsy>{children}</Dripsy>
+  return (
+    <AuthProvider>
+      <Dripsy>{children}</Dripsy>
+    </AuthProvider>
+  )
 }