Amplify to API Gateway with Cognito

Saturday, 29/10/2022

Tram Ho

Create an Amplify frontend that calls Amazon API Gateway using Cognito

This pattern explains how to deploy an AWS SAM application that includes an AWS Amplify frontend, Cognito, API Gateway and Lambda Function. It also sets environmental variables to be used by Amplify and Lambda Function.

AWSTemplateFormatVersion: '2010-09-09'
Transform: AWS::Serverless-2016-10-31
Description: &gt;
  Serverless Solution
  Cognito / Api Gateway / Lambda Function / Amplify
  Environmental Variables on Amplify
  Environmental Variables on Lambda Function

#################### PARAMETERS #############################

Parameters:

  AmplifyFrontendRepository:
    Type: String
    Description: 'Amplify Frontend Repository in the format: https://&lt;GitProviderDomain&gt;/&lt;user&gt;/&lt;repository&gt;'
    Default: ''

  OauthToken:
    Type: String
    Description: 'Access token for git provider repository'
    NoEcho: true
    Default: ''

########################### RESOURCES ################################
Resources: 

      ##################### API #######################

  myAPI:
    Type: AWS::Serverless::Api
    Description: Main API
    Properties:
      StageName: dev
      Cors:
        AllowMethods: "'GET, OPTIONS'"
        AllowHeaders: "'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'"
        AllowOrigin: "'*'"
        MaxAge: "'500'"
      Auth:
        AddDefaultAuthorizerToCorsPreflight: false
        DefaultAuthorizer: MyCognitoAuthorizer
        Authorizers:
          MyCognitoAuthorizer:
              UserPoolArn: !GetAtt rUserPool.Arn

##################### FUNCTIONS ################################

  ################### LAMBDA ELASTICSEARCH ######################

  myFunction:
    Type: AWS::Serverless::Function
    Properties:
      CodeUri: lambdaExample/
      Handler: app.lambda_handler
      Runtime: python3.7
      Events:
        EmyFunction:
          Type: Api
          Properties:
            Path: /lambdaExample
            Method: get
            RestApiId:
              Ref: myAPI
      Environment: 
        Variables: 
          cognito_region: !Ref AWS::Region
          user_pools_id: !Ref rUserPool
          user_pools_web_client_id: !Ref rAmplifyCognitoClient

# INTEGRATION WITH FRONTEND ################################################################

  ## COGNITO - USER POOL / USER POOL CLIENT

  rUserPool:
    Type: AWS::Cognito::UserPool
    Properties:
      AdminCreateUserConfig:
        AllowAdminCreateUserOnly: true
      AutoVerifiedAttributes:
        - email
      Schema:
        - AttributeDataType: String
          Mutable: true
          Name: given_name
          Required: true
        - AttributeDataType: String
          Mutable: true
          Name: family_name
          Required: true
        - AttributeDataType: String
          Mutable: false
          Name: email
          Required: true
      UsernameAttributes:
        - email
      UsernameConfiguration:
        CaseSensitive: false

  rAmplifyCognitoClient:
    Type: AWS::Cognito::UserPoolClient
    Properties:
      AccessTokenValidity: 1
      AllowedOAuthFlows:
        - implicit
      AllowedOAuthFlowsUserPoolClient: true
      AllowedOAuthScopes:
        - email
        - openid
        - profile
        - aws.cognito.signin.user.admin
      CallbackURLs:
        - "http://localhost"
      EnableTokenRevocation: true
      ExplicitAuthFlows:
        - ALLOW_ADMIN_USER_PASSWORD_AUTH
        - ALLOW_CUSTOM_AUTH
        - ALLOW_USER_PASSWORD_AUTH
        - ALLOW_USER_SRP_AUTH
        - ALLOW_REFRESH_TOKEN_AUTH
      IdTokenValidity: 1
      LogoutURLs:
        - "http://localhost"
      PreventUserExistenceErrors: ENABLED
      ReadAttributes:
        - given_name
        - family_name
        - email
        - email_verified
      RefreshTokenValidity: 1
      SupportedIdentityProviders:
        - COGNITO
      TokenValidityUnits:
        AccessToken: hours
        IdToken: hours
        RefreshToken: days
      UserPoolId: !Ref rUserPool


#################################################################

#################################################################
# AMPLIFY

  rAmplifyRole:
    Type: AWS::IAM::Role
    Properties:
      # RoleName: !Sub '${AWS::StackName}'
      AssumeRolePolicyDocument:
        Version: 2012-10-17
        Statement:
          - Effect: Allow
            Principal:
              Service:
                - amplify.amazonaws.com
            Action:
              - sts:AssumeRole
      Policies:
        - PolicyName: Amplify
          PolicyDocument:
            Version: 2012-10-17
            Statement:
              - Effect: Allow
                Action:
                  - "amplify:*"
                Resource: "*"

  rAmplifyApp:
    Type: AWS::Amplify::App
    Properties:
      Name: 
        !Sub '${AWS::StackName}'
      Description: Matching Tool
      CustomRules:
        - Source: '&lt;/^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/&gt;'
          Target: '/index.html'
          Status: '200'
      EnvironmentVariables:
      #   - Name: PROJECT_NAME
      #     Value: !Ref pProjectName
        - Name: cognito_region
          Value: !Ref AWS::Region
        - Name: user_pools_id
          Value: !Ref rUserPool
        - Name: user_pools_web_client_id
          Value: !Ref rAmplifyCognitoClient
        - Name: APIURL
          Value: !Sub "https://${myAPI}.execute-api.${AWS::Region}.amazonaws.com/dev"
      Repository: !Ref AmplifyFrontendRepository
      OauthToken: !Ref OauthToken
     
      IAMServiceRole: !GetAtt rAmplifyRole.Arn

  rAmplifyBranch:
    Type: AWS::Amplify::Branch
    Properties:
      BranchName: 'main'
      AppId: !GetAtt rAmplifyApp.AppId
      Description: Branch
      EnableAutoBuild: true

# OUTPUTS #################################################################

Outputs:
  CognitoRegion:
    Description: Cognito Region
    Value: !Ref AWS::Region
    Export:
      Name: CognitoRegion

  CognitoUserPool:
    Description: Cognito User Pool
    Value: !Ref rUserPool
    Export:
      Name: CognitoUserPool

  CognitoUserPoolClient:
    Description: Cognito User Pool Client
    Value: !Ref rAmplifyCognitoClient
    Export:
      Name: CognitoUserPoolClient

  APIurl:
    Description: API url
    Value: !Sub "https://${myAPI}.execute-api.${AWS::Region}.amazonaws.com/dev"
    Export:
      Name: APIurl

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

AWSTemplateFormatVersion: '2010-09-09'

Transform: AWS::Serverless-2016-10-31

Description: >

Serverless Solution

Cognito / Api Gateway / Lambda Function / Amplify

Environmental Variables on Amplify

Environmental Variables on Lambda Function

#################### PARAMETERS #############################

Parameters:

AmplifyFrontendRepository:

Type: String

Description: 'Amplify Frontend Repository in the format: https://<GitProviderDomain>/<user>/<repository>'

Default: ''

OauthToken:

Type: String

Description: 'Access token for git provider repository'

NoEcho: true

Default: ''

########################### RESOURCES ################################

Resources:

##################### API #######################

myAPI:

Type: AWS::Serverless::Api

Description: Main API

Properties:

StageName: dev

Cors:

AllowMethods: "'GET, OPTIONS'"

AllowHeaders: "'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'"

AllowOrigin: "'*'"

MaxAge: "'500'"

Auth:

AddDefaultAuthorizerToCorsPreflight: false

DefaultAuthorizer: MyCognitoAuthorizer

Authorizers:

MyCognitoAuthorizer:

UserPoolArn: !GetAtt rUserPool.Arn

##################### FUNCTIONS ################################

################### LAMBDA ELASTICSEARCH ######################

myFunction:

Type: AWS::Serverless::Function

Properties:

CodeUri: lambdaExample/

Handler: app.lambda_handler

Runtime: python3.7

Events:

EmyFunction:

Type: Api

Properties:

Path: /lambdaExample

Method: get

RestApiId:

Ref: myAPI

Environment:

Variables:

cognito_region: !Ref AWS::Region

user_pools_id: !Ref rUserPool

user_pools_web_client_id: !Ref rAmplifyCognitoClient

# INTEGRATION WITH FRONTEND ################################################################

## COGNITO - USER POOL / USER POOL CLIENT

rUserPool:

Type: AWS::Cognito::UserPool

Properties:

AdminCreateUserConfig:

AllowAdminCreateUserOnly: true

AutoVerifiedAttributes:

- email

Schema:

- AttributeDataType: String

Mutable: true

Name: given_name

Required: true

- AttributeDataType: String

Mutable: true

Name: family_name

Required: true

- AttributeDataType: String

Mutable: false

Name: email

Required: true

UsernameAttributes:

- email

UsernameConfiguration:

CaseSensitive: false

rAmplifyCognitoClient:

Type: AWS::Cognito::UserPoolClient

Properties:

AccessTokenValidity: 1

AllowedOAuthFlows:

- implicit

AllowedOAuthFlowsUserPoolClient: true

AllowedOAuthScopes:

- email

- openid

- profile

- aws.cognito.signin.user.admin

CallbackURLs:

- "http://localhost"

EnableTokenRevocation: true

ExplicitAuthFlows:

- ALLOW_ADMIN_USER_PASSWORD_AUTH

- ALLOW_CUSTOM_AUTH

- ALLOW_USER_PASSWORD_AUTH

- ALLOW_USER_SRP_AUTH

- ALLOW_REFRESH_TOKEN_AUTH

IdTokenValidity: 1

LogoutURLs:

- "http://localhost"

PreventUserExistenceErrors: ENABLED

ReadAttributes:

- given_name

- family_name

- email

- email_verified

RefreshTokenValidity: 1

SupportedIdentityProviders:

- COGNITO

TokenValidityUnits:

AccessToken: hours

IdToken: hours

RefreshToken: days

UserPoolId: !Ref rUserPool

#################################################################

# AMPLIFY

rAmplifyRole:

Type: AWS::IAM::Role

Properties:

# RoleName: !Sub '${AWS::StackName}'

AssumeRolePolicyDocument:

Version: 2012-10-17

Statement:

- Effect: Allow

Principal:

Service:

- amplify.amazonaws.com

Action:

- sts:AssumeRole

Policies:

- PolicyName: Amplify

PolicyDocument:

Version: 2012-10-17

Statement:

- Effect: Allow

Action:

- "amplify:*"

Resource: "*"

rAmplifyApp:

Type: AWS::Amplify::App

Properties:

Name:

!Sub '${AWS::StackName}'

Description: Matching Tool

CustomRules:

- Source: '</^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>'

Target: '/index.html'

Status: '200'

EnvironmentVariables:

# - Name: PROJECT_NAME

# Value: !Ref pProjectName

- Name: cognito_region

Value: !Ref AWS::Region

- Name: user_pools_id

Value: !Ref rUserPool

- Name: user_pools_web_client_id

Value: !Ref rAmplifyCognitoClient

- Name: APIURL

Value: !Sub "https://${myAPI}.execute-api.${AWS::Region}.amazonaws.com/dev"

Repository: !Ref AmplifyFrontendRepository

OauthToken: !Ref OauthToken

IAMServiceRole: !GetAtt rAmplifyRole.Arn

rAmplifyBranch:

Type: AWS::Amplify::Branch

Properties:

BranchName: 'main'

AppId: !GetAtt rAmplifyApp.AppId

Description: Branch

EnableAutoBuild: true

# OUTPUTS #################################################################

Outputs:

CognitoRegion:

Description: Cognito Region

Value: !Ref AWS::Region

Export:

Name: CognitoRegion

CognitoUserPool:

Description: Cognito User Pool

Value: !Ref rUserPool

Export:

Name: CognitoUserPool

CognitoUserPoolClient:

Description: Cognito User Pool Client

Value: !Ref rAmplifyCognitoClient

Export:

Name: CognitoUserPoolClient

APIurl:

Description: API url

Value: !Sub "https://${myAPI}.execute-api.${AWS::Region}.amazonaws.com/dev"

Export:

Name: APIurl

Integration of Amplify Frontend, Cognito, API Gateway, Lambda

This pattern explains how to deploy a SAM application that includes an AWS Amplify Frontend, Cognito, API Gateway and Lambda Function and set environmental variables to be used by Amplify and the Lambda function.

Learn more about this pattern at Serverless Land Patterns: https://serverlessland.com/patterns/amplify-apigw-lambda.

Important: this application uses various AWS services and there are costs associated with these services after the Free Tier usage – please see the AWS Pricing page for details. You are responsible for any AWS costs incurred. No warranty is implied in this example.

Requirements

Create an AWS account if you do not already have one and log in. The IAM user that you use must have sufficient permissions to make necessary AWS service calls and manage AWS resources.
AWS CLI installed and configured
Git Installed
AWS Serverless Application Model (AWS SAM) installed

Deployment Instructions

Create a new directory, navigate to that directory in a terminal and clone the GitHub repository:
git clone https://github.com/aws-samples/serverless-patterns
1
2
git clone https://github.com/aws-samples/serverless-patterns
Change directory to the pattern directory:
cd _patterns-model
1
2
cd _patterns-model
From the command line, use AWS SAM to deploy the AWS resources for the pattern as specified in the template.yml file:
sam deploy --guided
1
2
sam deploy --guided
During the prompts:
- Enter a stack name
- Enter the desired AWS Region
- Enter the Frontend Repository URL that will be hosted by AWS Amplify Frontend
- Enter the OauthToken for you git provider
- Allow SAM CLI to create IAM roles with the required permissions.
Once you have run sam deploy --guided mode once and saved arguments to a configuration file (samconfig.toml), you can use sam deploy in future to use these defaults.
Note the outputs from the SAM deployment process. These contain the resource names and/or ARNs which are used for testing.

How it works

This template deploys a full-stack application where Amplify frontend application and Lambda Function will have as environmental variables Cognito Region, Cognito User Pool ID and Cognito User Pool Client ID allowing developer to quickly develop an application with Authentication on front and backend. Template set cognito as authorizer for API Gateway, requiring the frontend app to pass json web token (JWT) to call API

Testing

On AWS amplify Service, click on the app name (same of SAM stack name), click environment varaibles. You should be able to see 4 environmental variables created by the template.

On AWS Lambda Service, click Applications, click the application name (same of SAM stack name), click on Resource called myFunction, click configuration, click Environment variables. You should be able to see 4 environmental variables created by the template.
Execute the lambda function and check the logs. You will see a result like:
Cognito Region: us-east-1
Cognito User Pool Id: us-east-1_aYtONfZZZ
Cognito User Pool Client ID: 1h2rrpldfqg8lhbgej2o5s2ZZZ

Cleanup

Delete the stack
aws cloudformation delete-stack --stack-name STACK_NAME
1
2
aws cloudformation delete-stack --stack-name STACK_NAME
Confirm the stack has been deleted
aws cloudformation list-stacks --query <span class="token string">"StackSummaries[?contains(StackName,'STACK_NAME')].StackStatus"</span>
1
aws cloudformation list-stacks --query <span class="token string">"StackSummaries[?contains(StackName,'STACK_NAME')].StackStatus"</span>

Share the news now

Source : Viblo

Amplify to API Gateway with Cognito

Integration of Amplify Frontend, Cognito, API Gateway, Lambda

Requirements

Deployment Instructions

How it works

Testing

Cleanup

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers