Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/takeshape/takeshape-starter-auth0-stripe
https://github.com/takeshape/takeshape-starter-auth0-stripe
Last synced: 1 day ago
JSON representation
- Host: GitHub
- URL: https://github.com/takeshape/takeshape-starter-auth0-stripe
- Owner: takeshape
- Created: 2021-08-27T13:56:00.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-04-06T15:20:31.000Z (over 2 years ago)
- Last Synced: 2023-03-02T21:26:12.614Z (over 1 year ago)
- Language: JavaScript
- Size: 1.3 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://app.takeshape.io/docs/schema/api-indexing-guide/).
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](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Screenshot
## Instructions
### Auth0
1. Create an Auth0 account, if you haven't already at [auth0.com](https://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](https://dashboard.stripe.com/test/apikeys)
- 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](https://dashboard.stripe.com/test/webhooks).
- Click Add an Endpoint, then enter a publicly accessible HTTP endpoint that is configured to receive Stripe webhooks. Follow [these instructions from Stripe](https://stripe.com/docs/webhooks#webhooks-summary) 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.
3. 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.
4. 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.
4. Create your business model in Stripe.
- Go to [Products → Add Product](https://dashboard.stripe.com/test/products/create).
- 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.
5. Give your Stripe account a name. This is required for Stripe Checkout.
- Go to [Settings → Account Details](https://dashboard.stripe.com/settings/account). 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](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](https://stripe.com/docs/testing).
`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](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions
are welcome!