Stripe App OAuth with Next.js: A Beginner's Guide

OAuth has become the cornerstone of modern web authentication, allowing users to grant websites and applications access to their information on other websites but without giving them the passwords. This tutorial will guide you through the process of implementing OAuth in a Next.js application, specifically focusing on a common use case: integrating with Stripe App Marketplace.

Prerequisites

Create a stripe app, following this getting started guide https://stripe.com/docs/stripe-apps/create-app

Follow steps 1,2,3 and three here https://stripe.com/docs/stripe-apps/api-authentication/oauth

Once you have a install link for your app, were ready to implement oAuth in Next JS

What is OAuth?

Before diving into the code, let's understand what OAuth is. It's an open standard for access delegation. In simpler terms, it's a way of letting your users log in to your web application using their information from another website (like Google, Facebook, or Stripe in this case).

Setting Up Your Next.js Environment

For this tutorial, we'll be working with Next.js, a popular React framework. Ensure you have Node.js installed on your computer before starting. Create a new Next.js project by running `npx create-next-app my-oauth-app` in your terminal, and navigate into your project directory.

Integrating Stripe OAuth

This example demonstrates how to integrate Stripe's OAuth process into a Next.js API route.

Step 1: Setting Up Environment Variables

Create a .env.local file in the root of your project and add your Stripe API keys:

STRIPE_TEST=your_test_api_key
STRIPE_PRODUCTION=your_production_api_key

Replace `your_test_api_key` and `your_production_api_key` with your actual Stripe API keys.

Step 2: Writing the OAuth Endpoint

Create a new file under `pages/api`, say `stripe-oauth.js`. Here's how you can adapt the provided code snippet for OAuth with Stripe:

import { NextApiRequest, NextApiResponse } from "next";
import btoa from 'btoa'; // You might need to install the 'btoa' package
// Use environment variables for the API key
const STRIPE_API_KEY = process.env.NODE_ENV === 'production' ? process.env.STRIPE_PRODUCTION : process.env.STRIPE_TEST;
const encodedKey = btoa(STRIPE_API_KEY + ":");

// Utility function for setting CORS headers
const setCORSHeaders = () => ({
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
  "Access-Control-Allow-Headers":
    "Content-Type, stripe-signature, Authorization",
});

// Your API endpoint
export async function POST(req: NextApiRequest, res: NextApiResponse) {
  try {
    const body = await req.json();
    const stripeOAuth = await fetch("https://api.stripe.com/v1/oauth/token", {
      method: "POST",
      headers: {
        Authorization: `Basic ${encodedKey}`,
        "Content-Type": "application/x-www-form-urlencoded",
      },
      body: new URLSearchParams({
        code: body.code.value,
        grant_type: "authorization_code",
      }),
    })
      .then((response) => response.json())
      .then((data) => {
        // console.log("stripe-oauth", data);
        return data;
      })
      .catch((error) => {
        console.error("Error:", error);
      });

    const stripeOAuthRefresh = await fetch(
      "https://api.stripe.com/v1/oauth/token",
      {
        method: "POST",
        headers: {
          Authorization: `Basic ${encodedKey}`,
          "Content-Type": "application/x-www-form-urlencoded",
        },
        body: new URLSearchParams({
          refresh_token: stripeOAuth.refresh_token,
          grant_type: "refresh_token",
        }),
      },
    )
      .then((response) => response.json())
      .then(async (data) => {
        return data;
      })
      .catch((error) => {
        console.error("Error:", error);
      });

    return new Response(
      JSON.stringify({
        stripeOAuth: stripeOAuth,
        stripeOAuthRefresh: stripeOAuthRefresh,
      }),
      {
        status: 200,
        headers: {
          ...setCORSHeaders(),
          "Content-Type": "application/json",
        },
      },
    );
  } catch (error) {
    // Check if error is an instance of Error
    if (error instanceof Error) {
      console.error("Error in POST request:", error.message);
      return new Response(error.message, {
        status: 500, // Internal Server Error
        headers: setCORSHeaders(),
      });
    } else {
      // Handle the case where the error is not an instance of Error
      console.error("An unknown error occurred:", error);
      return new Response("An unknown error occurred", {
        status: 500,
        headers: setCORSHeaders(),
      });
    }
  }
}

Step 3: Implementing the Frontend

In your front-end code, create a simple fetch request, that grabs the stripe code from the URL params

Step 4: Testing

Run your application npm run dev and test the OAuth flow. Ensure you handle any errors and the user experience is smooth.

Best Practices and Tips

- **Security:** Always keep your API keys secure. Never expose them in your client-side code.

- **Environment Variables:** Use different keys for development and production to avoid mixing up data.

- **Error Handling:** Implement robust error handling to improve the user experience.

- **Testing:** Regularly test the OAuth flow, especially after updating dependencies or making significant changes to your code.

Conclusion

Integrating OAuth into your Next.js application might seem daunting initially, but it's a powerful tool to enhance user experience and security. By following the steps outlined in this tutorial, you should have a basic but functional OAuth implementation with Stripe in your Next.js application.

Remember, OAuth is a broad topic, and Stripe is just one of the many services that use it. The principles you learned here can be applied to other services as well. Keep exploring and happy coding!