70 %

Building membership with AWS Amplify, Cognito, and Stripe Billing Portal

Steps:

Set up Cognito using Amplify auth
Implement magic links
Set up Stripe Billing Portal and webhooks
Use webhooks to attach billing status to users

Set up a project

shell

yarn init -y
git init

Set up Cognito User Pools using Amplify CLI

shell

amplify init

Amplify tries to be very invested in your project, editor, and more (which, tbh, is super annoying and makes it hard to tell which question will lead to what effect). We don't care about any of this really because the only thing we're using amplify for is easy cognito setup.

? Enter a name for the project cbsubscriptions
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: build
? Build Command:  npm run-script build
? Start Command: npm run-script start
// a bunch of cloudformation output including S3 buckets we won't be using

shell

➜ amplify add auth
Using service: Cognito, provided by: awscloudformation

 The current configured provider is Amazon Cognito.

 Do you want to use the default authentication and security
 configuration? (Use arrow keys)
❯ Default configuration
  Default configuration with Social Provider (Federation)
  Manual configuration
  I want to learn more.


 How do you want users to be able to sign in?
  Username
❯ Email
  Phone Number
  Email or Phone Number
  I want to learn more.

 Do you want to configure advanced settings?
❯ No, I am done.
  Yes, I want to make some additional changes.

It gives us two options for next steps

Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

We want amplify push.

➜ amplify push
✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category | Resource name           | Operation | Provider plugin   |
| -------- | ----------------------- | --------- | ----------------- |
| Auth     | cbsubscriptions4d05cfea | Create    | awscloudformation |
? Are you sure you want to continue? (Y/n)

After selecting Y you get to wait a few minutes (mine just took >3m) and see a lot of cloudformation output.

In the amplify service section of the AWS console you will now see your project. We don't really care about this area at all and care much more about the cognito user pool that is now in the cognito services area with our project name.