> ## Documentation Index
> Fetch the complete documentation index at: https://boilerplate.loopple.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Authentication - Supabase Auth

> Details about the authentication

## Authentication Setup with Supabase Auth

### Overview

The authentication setup in your application is powered by Supabase Auth, which provides user authentication and session management functionalities. This allows users to sign up, sign in, and manage their authentication state seamlessly.

### Implementation Details

#### `useUser` Utility Function

The `useUser` function is a custom hook used to access user authentication information throughout the application. It provides access to the user's session, details, and loading state.

```javascript theme={null}
import { createContext, useContext } from 'react';
import { useUser as useSupaUser, useSessionContext } from '@supabase/auth-helpers-react';

export const UserContext = createContext(undefined);

export const MyUserContextProvider = (props) => {
  // Get session and user information from Supabase Auth
  const { session, isLoading: isLoadingUser, supabaseClient: supabase } = useSessionContext();
  const user = useSupaUser();

  // Additional state for user details and loading data
  // ...

  // Use useEffect to fetch user details from the database
  // ...

  const value = {
    accessToken: session?.access_token ?? null,
    user,
    userDetails,
    isLoading: isLoadingUser || isLoadingData,
  };

  return <UserContext.Provider value={value} {...props} />;
};

export const useUser = () => {
  const context = useContext(UserContext);
  if (context === undefined) {
    throw new Error(`useUser must be used within a MyUserContextProvider.`);
  }
  return context;
};
```

#### `_app.js` Configuration

The \_app.js file serves as the entry point for configuring Supabase Auth in your application. It initializes the Supabase client and provides the session context to the entire application.

```javascript theme={null}
"use client";
import "../app/globals.css";
import { useState } from "react";
import { createBrowserSupabaseClient } from "@supabase/auth-helpers-nextjs";
import { SessionContextProvider } from "@supabase/auth-helpers-react";
import { MyUserContextProvider } from "../utils/useUser";

export default function MyApp({ Component, pageProps }) {
  // Initialize Supabase client
  const [supabaseClient] = useState(() => createBrowserSupabaseClient());

  return (
    <SessionContextProvider supabaseClient={supabaseClient}>
      <MyUserContextProvider>
        <Component {...pageProps} />
      </MyUserContextProvider>
    </SessionContextProvider>
  );
}

```

### Usage

#### 1. Accessing User Authentication Information:

Use the `useUser` hook to access user authentication information throughout your application. This hook provides access to the user's session, details, and loading state.

Example

```
import { useUser } from '../utils/useUser';

const ProfilePage = () => {
  const { user, isLoading } = useUser();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      {user ? (
        <div>Welcome, {user.email}!</div>
      ) : (
        <div>Please sign in to access your profile.</div>
      )}
    </div>
  );
};

export default ProfilePage;
```

#### 2. Authentication Flow:

Implement authentication flows such as sign-up, sign-in, and sign-out using Supabase Auth APIs. Handle authentication events and update the UI accordingly.

Example:

```javascript theme={null}
import { signIn, signOut } from '@supabase/auth';

const LoginPage = () => {
  const handleSignIn = async () => {
    try {
      await signIn();
    } catch (error) {
      console.error('Error signing in:', error.message);
    }
  };

  const handleSignOut = async () => {
    try {
      await signOut();
    } catch (error) {
      console.error('Error signing out:', error.message);
    }
  };

  return (
    <div>
      <button onClick={handleSignIn}>Sign In</button>
      <button onClick={handleSignOut}>Sign Out</button>
    </div>
  );
};

export default LoginPage;

```

## Login Page

### Overview

The Login page allows users to sign in to your application using their preferred authentication providers. This page utilizes the `Auth` component provided by Supabase Auth to streamline the login process and support multiple authentication providers.

### Implementation

#### `Auth` Component

The `Auth` component integrates with Supabase Auth and provides a user-friendly interface for authentication. It supports various appearance configurations and allows users to sign in using different authentication providers.

Example usage:

```jsx theme={null}
import { Auth } from "@supabase/auth-ui-react";
import { ThemeSupa } from "@supabase/auth-ui-shared";

const LoginPage = ({ supabaseClient, redirectTo }) => {
  return (
    <Auth
      supabaseClient={supabaseClient}
      appearance={{ theme: ThemeSupa }}
      providers={["github", "google"]} // Specify the authentication providers you want to enable
      redirectTo={redirectTo} // Redirect URL after successful login
    />
  );
};

export default LoginPage;
```