Authentication

VibeFast comes with a complete, full-stack authentication system built on top of the @convex-dev/auth package. It's designed to be secure, easy to use, and extensible.

Overview

Authentication is configured and managed in your convex/ directory.

• convex/auth.ts: This is the main configuration file where you define which authentication providers your app will use (e.g., Password, Google, Apple, GitHub, Anonymous).
• convex/auth.config.ts: This file stores the Application IDs for your OAuth providers.
• src/features/authentication/: This frontend folder contains the UI components for login, signup, and the AuthWatcher which syncs the auth state with the client.

How-To: Protect a Route

Protecting a screen or an entire navigation group is a common task. You can do this with the useConvexAuth hook.

Here’s how you would protect a layout route, like src/app/(tabs)/_layout.tsx:

import { Redirect, SplashScreen, Tabs } from 'expo-router';
import React, { useEffect } from 'react';

import { useConvexAuth } from '@/features/authentication/services';
import { useIsFirstTime } from '@/lib';

export default function TabLayout() {
  const { isAuthenticated, isLoading } = useConvexAuth();
  const [isFirstTime] = useIsFirstTime();

  useEffect(() => {
    if (!isLoading) {
      SplashScreen.hideAsync();
    }
  }, [isLoading]);

  if (isLoading) {
    return null; // Or a loading spinner
  }

  // If the user is on their first visit, redirect to onboarding.
  if (isFirstTime) {
    return <Redirect href="/onboarding/demo-one" />;
  }

  // If loading is finished and they are not authenticated, redirect to login.
  if (!isAuthenticated) {
    return <Redirect href="/login" />;
  }

  // If authenticated, render the tabs.
  return <Tabs>...</Tabs>;
}

How-To: Add a New Social Login Provider

Adding a new provider like Twitter or Discord involves three steps:

export default {
  providers: [
    // ... existing providers
    {
      domain: process.env.CONVEX_SITE_URL,
      applicationID: process.env.AUTH_TWITTER_ID, // Example
      type: 'twitter',
    },
  ],
};

import Twitter from '@auth/core/providers/twitter';
// ... other imports

export const { auth, signIn, signOut, store, isAuthenticated } = convexAuth({
  providers: [Password, Anonymous, Google, Apple, GitHub, Twitter], // Add Twitter here
});

This modular approach makes it straightforward to extend the authentication system to fit your needs.