What is the purpose of creating an Authorization flow when building a Stripe App for it's marketplace

Question

I am building a stripe App for it's market place and it has two different ways of doing what I would call server calls.

One is Server side Logic represented in this diagram

The other is Authorization flows represented in this diagram

Now for what I am trying to achieve.

I have a Next JS App forked from this platforms starter kit https://github.com/vercel/platforms

I initially setup a route to verify the stripe signature as per the server side logic documentation here https://stripe.com/docs/stripe-apps/build-backend

I was able to verify the signature after clicking a button on my stripe App dashboard UI, I verified the signature on my Next JS app

Where I then create a Stripe Secret with isVerifiedToSignUp to true such that I can then show a button in the stripe UI on look up of the secret that shows the login link to my app.

So first they authorize, then they are given the login link

const secret = await stripe.apps.secrets.create({
        scope: { type: 'user', user: body.user_id },
        name: "isAuthorizedToSignup",
        payload: true,
      });

      const createStripeVerify = async () => {
        try {
          const stripeVerifyCreation = await prisma.stripeVerify.create({
            data: {
              userId: body.user_id,
              accountId: body.account_id,
              verified: verify,
            },
          });
      
        } catch (error) {
          console.error("Error in creating stripe verify entry:", error);
        }
      }

Then I create in my database some records under stripeVerify model

Then once the user clicks Login in the stripe dashboard there are directed to my http://app.localhost:3000/login?userId=123&accountId=123

At this point they can login, This page has a function server side that looks up the userId in the database under stripeVerify and confirms it is there. If not it redirects to unauthorized. Such that users can only signup to the app via the stripe app dashboard not by visiting /login.

Now once they login, which is working with github, they are taking back to login, which has a middleware that checks for the session, redirects to app.localhost:3000/?userId=123&accountId=123 and load the dashboard.

Then on that page I run a update function since I has also passed the url params, to update the User just created with a field called stripeUserId:123.

So now I have a functioning app with a Stripe User Id married to my User table.

Here is where I start to get confused

What does this functionality allow me to do next.

Can I simply make calls to the Users Stripe dashboard from my app, via there UserID, because I only have my api keys for stripe.

If I wanted to do that Next JS App sending requests to users stripe Account is this possible with my setup?

I feel like it is not.

Is this where the Oauth Flow comes in?

According to the diagram the Stripe app can share the same Oauth as my app, if that is setup. What does it allow me to do, make requests from Stripe App to my Next JS App.

In this scenario wouldn't I just want to run a server side logic fetch request to my app, check the signature and then run a db call or something in my Next JS App.

Say for example I wanted a product in stripe when it is created to automatically send a request to my Next JS App, where it creates a Post in my model here

model Post {
  id            String   @id @default(cuid())
  title         String?  @db.Text
  description   String?  @db.Text
  content       String?  @db.Text
  slug          String   @default(cuid())
  image         String?  @default("123.png") @db.Text
  imageBlurhash String?  @default("data:image/png;base64,123") @db.Text
  createdAt     DateTime @default(now())
  updatedAt     DateTime @updatedAt
  published     Boolean  @default(false)
  site          Site?    @relation(fields: [siteId], references: [id], onDelete: Cascade, onUpdate: Cascade)
  siteId        String?
  user          User?    @relation(fields: [userId], references: [id], onDelete: Cascade, onUpdate: Cascade)
  userId        String?

  @@unique([slug, siteId])
  @@index([siteId])
  @@index([userId])
}

Is all I do listen for a webhook for a stripe product creation.

How do I build this into my Stripe App?

That is the first feature I want to create.

Finally I had a last question about the oauth Flow if you look at the oAuth diagram above

I added a note to it here

Is this a request to my Next JS App with the access token?

What do I have to do in my Next JS app to facilitate this?

I also created this diagram in Whimiscal if anyone wants to look for further understanding of my question

https://whimsical.com/stripe-app-next-js-app-8DzXSq4LtKf32CcQQSaoLZ

Answer 1

This solved my problem

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

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(),
      });
    }
  }
}

For more details you can follow instructions here