TakeShape Starter: Auth0 + Stripe

TakeShape's API Indexing is not only useful as a fallback when external services go down, but also as a means of reducing overall requests to those services.

In this starter, we will demonstrate how you can use TakeShape to combine what would be multiple Stripe API requests into a single TakeShape API request that doesn't query Stripe directly. In this starter's schema, API Indexing is configured to index Stripe products once every 72 hours, so none of the queries made from the frontend application will hit Stripe's servers.

To learn more about API Indexing, check out our guide on integrating it into your TakeShape projects.

The following is a guide to launch a Next.JS project that uses Auth0 for authentication, Stripe for purchasing subscription products, and TakeShape to store custom user profile information and generate an easy-to-use, user-scoped Stripe GraphQL API.

This is a Next.js project bootstrapped with create-next-app.

Screenshot

Instructions

Auth0

1. Create an Auth0 account, if you haven't already at auth0.com.

2. Create an Auth0 application by going to the Applications page under the Applications tab on the left.

   • Choose to create a Single Page Application.
   • Skip the Quick Start, and go directly to the Settings.
   • Take note of your domain, you'll need it later. It typically looks like this: dev-by9w1mxg.us.auth0.com.
   • Scroll down, and fill in the following fields:
     • Allowed Callback URLs: http://localhost:3000/
     • Allowed Logout URLs: http://localhost:3000/
     • Allowed Web Origins: http://localhost:3000/
     • Allowed Origins (CORS): http://localhost:3000/
   • Now go to the Advanced section, select the Grants tab, and verify that Authorization Code, Implicit and Refresh Token are all selected.
   • Scroll down to the very bottom of page and click Save Changes; the application doesn't automatically save itself!

3. Create a TakeShape project using the pattern in this repo. This button will deploy the project for you:

   • 

4. With your project imported, you should see an Auth0 and a Stripe service on the dashboard.

   • Click on the Auth0 service.
   • Type in your Auth0 domain from the earlier step.
   • Take note of the audience from the TakeShape config screen, you'll need it later.
   • Save the service.

5. Set up your TakeShape API Key for making public queries. You'll need to use this for getting a list of products available to purchase.

   • Go to the Settings tab, then to API Keys.
   • Create a new API Key and name it whatever you like, such as starter.
   • Give it the anonymous role.
   • Copy the key and save it somewhere. This is the only time you'll see it.

6. Now go back to your Auth0 account where you'll create an API for your application.

   • Go to Applications → APIs and click Create API.
   • Set the identifier to the audience you encountered earlier on the TakeShape Auth0 Service page.
   • Leave the signing algorithm as RS256.
   • From the Settings tab, scroll down to Access Settings and turn on Allow Offline Access — this will allow your project to generate refresh tokens and then refresh user tokens when they expire.
   • Save the API.

Stripe

For the purposes of this starter it's assumed you are using Stripe in Test Mode, and using appropriately scoped API keys. Please do not run the demo on a live account as you may incur unexpected charges from Stripe.

1. Create a Stripe account.

2. Take note of your Stripe API keys.

   • Go to Developers → API Keys
   • You are going to need your publishable key and your secret key.

3. (Optional) Take note of your Stripe webhook endpoint secret.

   • Go to Developers → Webhooks.
   • Click Add an Endpoint, then enter a publicly accessible HTTP endpoint that is configured to receive Stripe webhooks. Follow these instructions from Stripe for more information.
   • Click Select events and input product into the search field. You should see checkboxes for product.created, product.updated and product.deleted. Check all three and select Add events.
   • Click Add endpoint, and you'll be taken to the webhook endpoint's page. Here you'll see Signing secret, with text under it that says Reveal. Click Reveal, and copy this secret. You'll need it to configure Stripe webhooks with your TakeShape project.

4. In TakeShape, set up your Stripe service.

   • Select Stripe from the list of services on the API tab, in the Patterns & Services pane.
   • Enter the Stripe secret key into the Authentication → API Key field.
   • (Optional) Enter your Stripe webhook endpoint secret in the Webhook Secret field.
   • Save the service.

5. Set up API Indexing

   • After saving your service, you'll be shown a popup modal with a list of all available queries and mutations you can import into your project. Select "Skip".
   • Next, you should see a snackbar notification at the bottom of your screen that will first say "Started indexing Stripe_Product," then says "Finished indexing Stripe_Product (x successful, y failed)" with x and y representing the number of products successfully and unsuccessfully indexed.

   

   • If you do not see this snackbar, you can re-trigger Indexing by clicking on Stripe in your list of services on the left. You will be taken to the service page, where you can click the Reindex Data button as shown below.

   

   

   • (Optional) To configure your webhooks, navigate to the API tab and click the JSON tab in the workbench as shown below.

     

     • In your project's JSON schema, you'll find a root-level indexedShapes object. This is where your API indexing is configured. Set up the triggers array as shown below to reindex your products whenever they change in Stripe. This uses the Stripe webhook you set up earlier.

     {
        "query": "list",
        "type": "webhook",
        "service": "stripe",
        "events": ["product.updated", "product.created", "product.deleted"]
     }
     

     • Your triggers array should look like this if done right:

     "triggers": [
        {"type": "schedule", "query": "list", "interval": 1640},
        {
           "query": "list",
           "type": "webhook",
           "service": "stripe",
           "events": ["product.updated", "product.created", "product.deleted"]
        }
     ]
     

     • Deploy your schema changes by clicking the Deploy button.

6. Create your business model in Stripe.

   • Go to Products → Add Product.
   • Provide a name, description and image for your product.
   • Use the standard pricing pricing model, provide a recurring or one time price, then save the product. Note: this starter supports a single active one time price, and multiple recurring prices per product.
   • Do this a few time to add several products. You can experiment with multiple / different pricing options, but please stick to the Standard pricing model.

7. Give your Stripe account a name. This is required for Stripe Checkout.

   • Go to Settings → Account Details. In the Stripe UI, click the gear icon in the upper right. Then in the lower section of the page, "Business Settings," you'll see the Account details link.
   • Enter an Account name where indicated.
   • Save the settings.

Running the Starter

1. Head over to your trusty terminal or tool of choice.

   • Clone this repo with git clone https://github.com/takeshape/takeshape-starter-auth0-stripe.git.
   • cd into the folder that the cloning created.
   • Run mv .env.local-example .env.local to rename the environment variables file.
   • Run npm install.

2. Follow the instructions in .env.local.

   • Some of the data you enter will be from Auth0, some will be from your TakeShape project
   • You'll use your Stripe API publishable key as well

3. Run npm run dev to start the application and open http://localhost:3000 with your browser to play around!

4. First, login using a valid Auth0 or third-party account. You can also sign up for a new account.

5. Go to the homepage, select a product and payment terms then add it to your cart.

6. Click the Cart icon in the top nav. Review your cart, then click Checkout Now.

7. On the Stripe Checkout page, use one of the Stripe test credit card numbers. 4242 4242 4242 4242 is commonly used, and will allow you to complete a successful purchase with no secondary authentication.

8. Upon a successful purchase you should be directed back to your dev site, and a snackbar will pop up.

9. Try canceling a subscription from your Purchases page.

10. Play around, update your profile, create more users, more purchases. Try products with multiple prices...

Known Limitations

• Due to limitations in the official Stripe Checkout, you will encounter an error if you try to check out with a cart containing items with different subscription periods. For example, if you have a month subscription option for Product A and a year subscription option for Product B, and you have both of those in the cart at the same time, Stripe will throw an error. A future version of this starter may shift to a custom checkout experience to work through this limitation.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!