How to Add User Authentication to a YouTube Clone in React

How to Add User Authentication to a YouTube Clone in React

Auth turns a demo YouTube clone into a real app. Here is how to add user authentication.

Choose an Auth Approach

Use a service like Firebase Auth for speed, or a custom backend with JWTs for control. Firebase is the fastest for a frontend-focused project.

Set Up an Auth Context

Create an AuthContext that tracks the current user and exposes signup, signin, and signout. Wrap your app in the provider so any component can access auth state.

Protect Routes

Create a ProtectedRoute component that redirects unauthenticated users to login. Wrap pages that require login, like uploading a video or accessing a watch later list.

Personalize With the User

Use the signed-in user to show personalized content: subscribe to channels, like videos with your account, and maintain a watch history and watch later list tied to your user id.

Sign-In Page

Build a login page that calls your auth functions. Handle loading and error states, and navigate to the homepage on success.

Persist Across Reloads

Firebase and JWT-based auth persist the user across reloads. Listen to auth state changes in your context so the user is set on app load and stays logged in.

Configure Authorized Domains

In production, add your deployed domain to the authorized domains in your auth provider. Otherwise auth redirects fail in production even though they work locally.

The Takeaway

Add user authentication by choosing an approach, setting up an AuthContext, protecting routes, personalizing with the user, building a login page, persisting across reloads, and configuring authorized domains for production.