Serverless — Serverless Stack Web

Refactor our application to use Serverless Stack Web for authentication.

4 min readMay 14, 2022


Serverless App

In the previous article, we used AWS Amplify for authentication. With the new release of Serverless Stack (SST), now we can use the provided web package to authenticate with AWS Cognito.

We will refactor our frontend code to use SST for authentication instead of using AWS Amplify.

This article is part of the Serverless for Beginners series.

The source code can be found in this repository.

Getting Started

Let’s start by removing the AWS Amplify package and installing SST web.

Under the frontend folder, run the following commands.

# yarn remove aws-amplify
# yarn add @serverless-stack/web

SST Cognito Authentication

In the frontend/src/libs/auth.tsx library, we change the urql exchange-auth functions to use the SST Cognito APIs.

import { authExchange } from "@urql/exchange-auth";
import { Cognito } from "@serverless-stack/web";
import config from "../config";
export const cognito = new Cognito({
UserPoolId: config.cognito.USER_POOL_ID,
ClientId: config.cognito.APP_CLIENT_ID,
const getAuth = async ({ authState, mutate }) => {
return null;
const addAuthToOperation = ({ authState, operation }) => {
const session = cognito.session;
if (!session) {
return operation;
const fetchOptions =
typeof operation.context.fetchOptions === "function"
? operation.context.fetchOptions()
: operation.context.fetchOptions || {};
return makeOperation(operation.kind, operation, {
fetchOptions: {
headers: {
Authorization: session.getAccessToken().getJwtToken(),

We configure the Cognito instance with the user pool id and client id.

In the frontend/src/main.tsx component, we use the SST Cognito provider and pass in the configured Cognito instance.




Software engineer, Data Science and ML practitioner.