How to Set Up Authentication and Billing in React

Building a web application with authentication and payments can be challenging, especially when ensuring security, seamless user experience, and integration with third-party providers. Whether you're launching a SaaS, a subscription-based platform, or a paywalled content service, having a solid authentication and billing setup is crucial.

In this guide, we'll break down the best practices for handling authentication and billing in React, covering key insights from community discussions, common implementation patterns, and potential pitfalls to avoid.

Choosing the Right Authentication Method for Your React App

Common questions developers ask:

• What is the easiest way to set up authentication in React?
• Should I use JWTs, sessions, or a third-party provider like Firebase or Auth0?
• How do I securely store authentication tokens?

From the discussions we reviewed, there are two main approaches:

1. Using Third-Party Authentication Providers

Popular solutions like Firebase, Supabase, Auth0, and Clerk offer authentication services with minimal setup. They handle user management, social login, and security features like multi-factor authentication (MFA).

Pros:

• Easy to implement with SDKs
• Supports OAuth, Google login, and social sign-ins
• Built-in security measures

Cons:

• Vendor lock-in
• Limited customization

Example: Setting up Firebase authentication in React

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
 
const auth = getAuth();
 
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => console.log("User signed in:", userCredential.user))
  .catch((error) => console.error("Authentication error:", error.message));
 

2. Implementing Custom Authentication (JWT or Session-Based)

For greater control, many developers prefer implementing their authentication system using JSON Web Tokens (JWT) or session-based authentication.

JWT authentication involves issuing a token upon login and storing it in a secure location. Sessions, on the other hand, store authentication state on the server and use HTTP-only cookies to maintain the session.

Example: Using JWT authentication with Express.js

const jwt = require("jsonwebtoken");
 
app.post("/login", (req, res) => {
  const user = { id: req.body.userId };
  const token = jwt.sign(user, process.env.JWT_SECRET, { expiresIn: "1h" });
 
  res.cookie("auth_token", token, { httpOnly: true, secure: true });
  res.json({ success: true });
});
 

For security, avoid storing tokens in localStorage due to XSS vulnerabilities. Instead, use HTTP-only cookies for better protection.

Securing Your Authentication Flow

Key security concerns raised in developer forums:

• How do I prevent CSRF and XSS attacks?
• Should I use refresh tokens for session management?
• How do I store user authentication data securely?

Best practices:

1. Use HTTP-only cookies instead of localStorage for storing authentication tokens.
2. Implement CSRF protection if using cookies for authentication.
3. Set up refresh tokens for session longevity.

Example: Automatically refreshing JWTs

const refreshAuthToken = async () => {
  const response = await fetch("/api/refresh-token", { credentials: "include" });
  const data = await response.json();
  return data.token;
};
 

By implementing refresh tokens, users remain logged in without needing to manually re-authenticate, enhancing user experience.

Adding Payments to a React App

Common questions developers ask:

• Should I use Stripe Payment Links or Stripe Elements?
• How do I restrict content based on payments?
• What happens when a user cancels or fails a payment?

Many developers prefer Stripe due to its flexible APIs and reliable infrastructure. There are two main ways to integrate Stripe into React:

1. Using Stripe Payment Links

For simple payment flows, Stripe Payment Links allow you to generate a checkout page with minimal effort. However, they offer limited customization.

2. Using Stripe Elements for a Custom Checkout Flow

For better UX and control over the payment process, Stripe Elements allows you to create a custom checkout experience.

Example: Integrating Stripe Elements in React

import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import CheckoutForm from "./CheckoutForm";
 
const stripePromise = loadStripe("your-publishable-key");
 
const PaymentPage = () => (
  <Elements stripe={stripePromise}>
    <CheckoutForm />
  </Elements>
);
 

To handle recurring subscriptions, use Stripe’s Customer Portal or webhooks to manage subscription status dynamically.

Restricting Access to Paid Users

Once payments are set up, you’ll need to restrict access to paid users. Store user payment status in a database and check it upon authentication.

Example: Middleware to verify payment status

const checkSubscription = async (req, res, next) => {
  const userId = req.user.id;
  const isActive = await verifyUserSubscription(userId);
 
  if (!isActive) {
    return res.status(403).json({ error: "Subscription required" });
  }
 
  next();
};
 

If a user cancels their subscription or payment fails, their access should be revoked automatically. Use Stripe webhooks to listen for events like invoice.payment_failed and update user permissions accordingly.

Conclusion

Setting up authentication and billing in React requires careful planning, secure token management, and seamless payment integration. Whether using Firebase or Supabase for authentication, or Stripe for payments, choosing the right stack depends on your project’s needs.

For developers looking for an all-in-one solution, Update offers a streamlined way to integrate authentication and billing without the hassle of setting up multiple services.

By following best practices and addressing security concerns, you can ensure a smooth user experience while protecting your application from common vulnerabilities.