Sign in

Enable Sign in so users can access restricted areas of your webapp.

With this feature configured, DevLaunchPad creates a new user whenever someone makes a purchase. The user is sent their username and password in an email.

Users sign in to your webapp by following the email instructions or clicking the sign in navigation links. These link to a /sign-in page where the user enters their credentials.

Customise the default sign up email in serverless/resources/emails/new-user.md.

Configuration

Open deployment-params.yml and set SignInEnabled: true.

deployment-params.yml

SignInEnabled: true

Deployment

Run npm run deploy.

DevLaunchPad automatically detects the sign in settings and configures:

Automated user creation after purchase using the email address entered on the Stripe checkout page and an automatically generated password.
Sign in links within your webapp's header and footer.
Sign in page accessible at /sign-in.

New users are stored in the AWS Cognito service. View users by selecting the relevant user pool in the AWS Console.

User groups

DevLaunchPad automatically creates a user after purchase, adding the user to a group based on the product price they selected.

By default:

Users who buy starter are added to the starter group.
Users who buy pro are added to the pro group.

Doing so allows you to write frontend code that takes into account the price plan. See below for full details on how to do this.

You can see which users belong to a group by selecting Groups while viewing your user pool in the AWS Console.

Customisation

Follow these steps to create frontend pages or backend APIs only accessible to signed in users.

Restricted Vue components

Call useUserStore() in any component to get details of the current user.

const userStore = useUserStore();

The following properties & functions are available on the user store:

Property/function	Return type	Description
`userStore.isSignedIn`	`boolean`	Whether this user store represents a signed in user.
`userStore.userId`	`string`	The Cognito user id.
`userStore.fetchProfile()`	none	Retrieves additional details about the user beyond the user id.
`userStore.email`	`string`	Email address. Must first call `fetchProfile()`.
`userStore.membership`	`string`	Groups to which this user belongs e.g. `starter`, `pro`. Must first call `fetchProfile()`.

For example, you can restrict part of your Vue template to signed in users with v-if.

<template v-if="userStore.isSignedIn">
    Only signed in users can see this.
<template>

See pages/secure.vue for a full example, accessible at /secure.

Securing APIs

DevLaunchPad ships with an authorizer that you can attach to any Lambda function you create.

Backend

Just add authorizer: serviceAuthorizer to any serverless.yml function definition, as below:

serverless.yml

functions:
  generateImage:
    handler: functions/generate-image.handler
    events:
      - httpApi:
          path: /functions/images
          method: post
          authorizer: serviceAuthorizer

Within your Lambda code, you can access the user id as follows:

const userId = event.requestContext.authorizer?.jwt.claims.sub

Now your function will only execute when a valid Authorization header is added to the request. Otherwise, a 401 Unauthorized response is returned.

Frontend

Get the correct header value by calling fetchAuthSession and querying the appropriate property, as below:

import { fetchAuthSession } from 'aws-amplify/auth';

const session = await fetchAuthSession()
const token = session.tokens?.idToken?.toString() as string

const response = await fetch(`${useRuntimeConfig().public.API_URL}/auth-demo`, {
    headers: {
        'Authorization': token
    }
})

See pages/secure.vue for a full example, accessible at /secure.