There you are, tinkering away at your Momento-powered web application when suddenly you realize your app needs an access token to communicate with Momento services!

In this article, we will walk you through two examples of a browser-based chat application, built using Momento Topics for pub/sub capabilities via the Momento Web SDK. Each app will have a mechanism for acquiring Momento fine-grained access controlled (FGAC) tokens to give the browser restricted access to a topic, but we will illustrate two different ways to go about it.​​

You can think of these two approaches as utilizing an embedded or standalone Token Vending Machine (TVM), respectively. A TVM is a component of your application that generates new FGAC tokens that your application can use to interact with Momento services. 

The first method is best suited for web apps with a server-side component, such as our example NextJS chat app. This app sets up an “/api/momento/token” auth endpoint that the client component of the app can make GET requests to. This auth endpoint uses the Momento JavaScript SDK to vend new FGAC tokens and the scope of these tokens can be configured to allow access to specific Momento caches and/or topics. 

The second method is best suited for static websites or any other application with no server-side component, such as our Vite static JavaScript chat app example. To acquire its FGAC tokens, our Vite app makes requests to an external HTTP endpoint provided by a deployed instance of the Momento Token Vending Machine, a simple application built using AWS API Gateway, AWS Lambda, and AWS CDK.

In both cases, you will need to provide an access token generated from the Momentoコンソール in order for your TVM component to vend new access tokens.

The Momento TVM is implemented as an AWS Lambda function and it uses the Momento JavaScript SDK to vend tokens via an API Gateway endpoint. You first configure the permissions scope of the FGAC tokens you want to vend as in the code sample below. This example code creates a permission scope that allows access to all topics that live in the cache named “default-cache”. The TVM will generate tokens that use this permission scope.

After you deploy the TVM Lambda function using our predefined AWS CDK stack, you’ll see the  API Gateway endpoint in your terminal. Now anyone can make requests to your endpoint and receive a Momento access token. 

A completely open TVM endpoint may not be desirable; in that case, you can configure an API Gateway authorizer of your choice. We provide basic examples for a Lambda authorizer and an AWS Cognito User Pool authorizer that use hardcoded username/password credentials. Simply turn on that option in the TVM config file and provide the additional environment variables to allow only your application to access the endpoint.

export enum AuthenticationMethod {
  Open,             // no authentication
  LambdaAuthorizer, // use Lambda Authorizer attached to API Gateway
  AmazonCognito,    // use Cognito user pool authorizer attached to API Gateway
}
export const authenticationMethod: AuthenticationMethod = AuthenticationMethod.AmazonCognito;

Additionally, if you use the Cognito authorizer option, you can configure the TVM to assign users to different user groups, each of which is associated with a different FGAC token permission scope to allow for different tiers of access (e.g. an admin would have ReadWrite permissions rather than ReadOnly permissions). To see this behavior in action, try out the Vite chat app with the “cognito” auth method selected.

We hope this walkthrough provided some guidance on where and how to deploy your own Momento Token Vending Machine! For more information, check out our documentation on Momento AuthToken API, and join our discord to learn more about creating secure web applications powered by Momento Cache and Momento Topics. 

アニタ・ルアンロツァクン

著者

Anita is a software engineer on the Developer Ecosystem team at Momento, working to provide an excellent developer experience and help people build serverless applications. When she’s not working, Anita enjoys reading, building dynasties in the Sims 3, and finding new foodie spots in the PNW.