Skip to main content

Authentication

The AI Ingredient Scanner uses Firebase Authentication for user management, with Google Sign-In as the primary authentication method.

Overview​

Features​

FeatureDescription
Google Sign-InOAuth 2.0 authentication via Firebase
Guest ModeAnonymous usage without account
Profile SyncFirestore persistence across devices
Account DeletionGDPR-compliant data removal

Authentication Flow​

1. Initial State​

When the app launches, it checks for an existing Firebase session:

// AuthContext.tsx
useEffect(() => {
  const unsubscribe = onAuthStateChanged(auth, async (firebaseUser) => {
    setUser(firebaseUser);
    if (firebaseUser) {
      await syncUserToFirestore(firebaseUser);
    }
    setLoading(false);
  });
  return () => unsubscribe();
}, []);

2. Login Screen​

Users see a premium login screen with two options:

  • Continue with Google - Full authentication with profile sync
  • Continue as Guest - Anonymous mode (no data persistence)

3. Google Sign-In​

Platform-specific implementation:

const signInWithGoogle = async () => {
  if (Platform.OS === 'web') {
    // Web: Firebase popup
    await signInWithPopup(auth, googleProvider);
  } else {
    // Native: Expo Auth Session
    await promptAsync();
  }
};

4. Firestore Profile Sync​

On successful sign-in, user data syncs to Firestore:

// User document structure
interface FirestoreUser {
  uid: string;
  email: string | null;
  displayName: string | null;
  photoURL: string | null;
  provider: string;
  createdAt: Timestamp;
  lastLoginAt: Timestamp;
  profile?: {
    allergies: string[];
    skinType: SkinType;
    expertise: ExpertiseLevel;
  };
}

Firebase Configuration​

Setup​

Firebase is configured in src/config/firebase.ts:

const firebaseConfig = {
  apiKey: 'your-api-key',
  authDomain: 'your-project.firebaseapp.com',
  projectId: 'your-project-id',
  storageBucket: 'your-project.appspot.com',
  messagingSenderId: 'your-sender-id',
  appId: 'your-app-id',
  measurementId: 'your-measurement-id',
};

OAuth Configuration​

For Google Sign-In to work:

  1. Firebase Console: Enable Google provider in Authentication
  2. Google Cloud Console: Configure OAuth consent screen
  3. Web Client ID: Add to AuthContext.tsx
const [request, response, promptAsync] = Google.useAuthRequest({
  webClientId: 'your-oauth-client-id.apps.googleusercontent.com',
});

User Management​

Sign Out​

const signOut = async () => {
  await firebaseSignOut(auth);
  setUserProfile(null);
};

Account Deletion​

GDPR-compliant deletion removes all user data:

const deleteAccount = async () => {
  // 1. Delete scan history subcollection
  const scansRef = collection(db, 'users', user.uid, 'scans');
  const scansSnap = await getDocs(scansRef);

  const batch = writeBatch(db);
  scansSnap.docs.forEach((scanDoc) => {
    batch.delete(scanDoc.ref);
  });

  // 2. Delete user document
  batch.delete(doc(db, 'users', user.uid));
  await batch.commit();

  // 3. Delete Firebase auth user
  await deleteUser(user);
};

Firestore Security Rules​

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // Users can only access their own data
    match /users/{userId} {
      allow read, write: if request.auth != null && request.auth.uid == userId;

      // Scan history subcollection
      match /scans/{scanId} {
        allow read, write: if request.auth != null && request.auth.uid == userId;
      }
    }
  }
}

UI Components​

Login Screen​

Premium gradient design with:

  • App branding and logo
  • Feature pills (Scan Labels, AI Analysis, Allergy Alerts)
  • Google Sign-In button
  • Guest mode option
  • Privacy policy link

Profile Section​

In Settings, authenticated users see:

  • Profile photo and name
  • Email address
  • Sign Out button
  • Privacy Policy link
  • Delete Account button (danger zone)

Guest users see:

  • Guest mode message
  • Sign In with Google button
  • Privacy Policy link

Privacy​

See our Privacy Policy for details on:

  • Data collection and usage
  • User rights (access, update, delete)
  • Third-party services
  • Data retention policies