This is an example project showing how Momento topics and secure tokens can be used within a nextjs application. A deployed example can be found here.
This example project is a browser-based chat application that allows pub/sub communication between your users via Momento Topics. Each browser will need a Momento auth token in order to communicate with the Momento Topics server, and those tokens can be scoped to provide permissions to only the necessary caches and topics using the Momento JavaScript SDK.
A version of this project has been deployed on Vercel.
You will need a Momento auth token and a cache, both of which you can create in the Momento Console. Check out the getting started guide for more information on obtaining a server side token and creating a cache.
First, create a new file called .env.local that looks like:
MOMENTO_AUTH_TOKEN=<Put your token here>
NEXT_PUBLIC_MOMENTO_CACHE_NAME=<Put your cache name here>
Second, go to the config.ts file and configure the scope of permissions and the expiry duration for the tokens that the nextjs app will use to talk to the Momento service. For example, you can restrict the permissions for these browser tokens so that they have read-only access or read-write access, and you can also restrict them to specific caches or topics.
You may also configure the authentication method in the config.ts file and by adding additional environment variables:
NEXT_PUBLIC_AUTH_METHOD=<"open" or "credentials">
MOMENTO_AUTH_USERNAME=<Choose a username>
MOMENTO_AUTH_PASSWORD=<Choose a password>
NEXTAUTH_SECRET=<Choose a random string>
The default setting is "open", meaning there is no authentication. An example for the "credentials" option involves a basic check of a username and password is provided in the token/route.ts file. Additional auth methods can be set up using a library such as NextAuth.js.
Then, run the development server:
npm run dev
# or
yarn dev
# or
pnpm devOpen http://localhost:3000 with your browser to see the result.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!