Authentication Frontend Utilities - Table of Contents ✨

This document serves as a guide to the various authentication utility functions used in your typical frontend application. Each function is listed with its location in the file and a brief description of its purpose. Use keywords like "sign up", "login", "set cookie", "password", and "roles" to quickly find the relevant functions using "Ctrl + F".

Table of Contents

1.1. Configuration

• Firebase Configuration
• Auth Role Configuration
• Cookie Configuration
• Cookie Keys

1.2. User Authentication

• getCurrentUser
• refreshToken
• signInWithGoogle
• logInWithEmailAndPassword
• createUserInFirebase
• createUser
• registerWithEmailAndPassword
• sendPasswordReset
• sendInviteLink
• confirmNewPassword
• confirmVerifyEmail
• logout
• EmailAction

1.3. Backend Interactions

• createUserInDB
• finishGoogleLoginRegistration
• addAuthInterceptor

2.1. Authentication Utilities

• userIsAuthenticated

2.2. Protected Route Component

• ProtectedRoute

3.1. React-Cookie Integration

• withCookies
• Cookies

3.2. Cookie Management

• setCookie
• clearCookies

---

Firebase Configuration 👈

Firebase Configuration

• Location: Source
• Description: Sets up the Firebase app configuration using environment variables.

User Authentication 👈

getCurrentUser

• Location: Source
• Description: Returns the current user synchronously.

refreshToken

• Location: Source
• Description: Refreshes the current user's access token by making a request to Firebase.

signInWithGoogle

• Location: Source
• Description: Signs a user in with Google using Firebase. Users are given USER_ROLE by default.

logInWithEmailAndPassword

• Location: Source
• Description: Logs a user in with email and password, and checks if the email is verified.

createUserInFirebase

• Location: Source
• Description: Creates a user in the Firebase database.

createUser

• Location: Source
• Description: Creates a user both in Firebase and the NPO database, then sends an email verification.

registerWithEmailAndPassword

• Location: Source
• Description: Registers a new user using email and password, then navigates to the specified path.

sendPasswordReset

• Location: Source
• Description: Sends a password reset email to the specified email address.

sendInviteLink

• Location: Source
• Description: Sends an invite link to create a new account with a specified email.

confirmNewPassword

• Location: Source
• Description: Completes the password reset process with a confirmation code and new password.

confirmVerifyEmail

• Location: Source
• Description: Applies a verification code sent to the user by email.

logout

• Location: Source
• Description: Logs a user out and navigates to the specified path.

EmailAction

• Location: Source
• Description: Handles specific email-related actions, such as resetting a password or verifying an email address, based on the query parameters present in the URL.

Backend Interactions 👈

createUserInDB

• Location: Source
• Description: Adds a user to the NPO database and deletes the Firebase user if there's an error.

finishGoogleLoginRegistration

• Location: Source
• Description: Completes the additional information required for a Google login registration.

addAuthInterceptor

• Location: Source
• Description: Adds an Axios interceptor to refresh the user's access token if it expires.

Auth Role Configuration 👈

Auth Role Configuration

• Location: Source
• Description: An object containing various roles used in the authentication system.

Authentication Role Utilities 👈

userIsAuthenticated

• Location: Source
• Description: Checks if the user is authenticated and has the required role to access a route.

Protected Route Component 👈

ProtectedRoute

• Location: Source
• Description: Protects a route from unauthenticated users and redirects them if necessary.

React-Cookie Integration 👈

withCookies

• Location: Source
• Description: Higher-order component to provide cookies context to a component.

Cookies

• Location: Source
• Description: Provides the Cookies API for managing cookies in the application.

Cookie Configuration 👈

cookieConfig

• Location: Source
• Description: Options for the format of a cookie, including maxAge, path, and secure attributes.

cookieKeys

• Location: Source
• Description: An object containing keys for cookies to store, such as ACCESS_TOKEN and ROLE.

Cookie Management 👈

setCookie

• Location: Source
• Description: Sets a cookie in the browser with specified configuration.

clearCookies

• Location: Source
• Description: Clears all cookies stored during login by removing each cookie specified in cookieKeys.

---

Demos 👀

• Registering New Accounts: Source
• Sending Admin Role Invites: Source
• Handle Forgotten Passwords: Source
• Login: Source
• Logout: Source
• Adding New User to DB: Source
• Reset Password: Source
• Verify Email: Source

This README provides an organized overview of the authentication utilities in our frontend application, facilitating quick access to specific functions based on their keywords and descriptions.