How to automatically deploy your full-stack JavaScript app with AWS CodePipeline
In our previous blog post we set up a horizontally scalable deployment for our full-stack javascript app. In this article we would like to show you how to set up AWS CodePipeline to automatically deploy changes to the application....
Sep 15, 2023
9 mins
How to host a full-stack app with AWS CloudFront and Elastic Beanstalk
You have an SPA with a NestJS back-end. What if your app is a hit? You need to be prepared to serve thousands of users? You might need to scale your API horizontally, which means you need to have more instances running behind a load balancer....
Sep 11, 2023
12 mins
BullMQ with ExpressJS
Node.js uses an event loop to process asynchronous tasks. The event loop is responsible for handling the execution of asynchronous tasks, but it does it in a single thread. If there is some CPU-intensive or long-running (blocking) logic that needs to be executed, it should not be run on the main thread. This is where BullMQ can help us. In this blog post, we are going to set up a basic queue, using BullMQ. If you'd like to jump right into developing with a queue, check out our starter.dev kit for ExpressJS, where a fully functioning queue is already provided for you. Why and when to use a queue? BullMQ is a library that can be used to implement message queues in Node.js applications. A message queue allows different parts of an application, or different applications, to communicate with each other asynchronously by sending and receiving messages. This can be useful in a variety of situations, such as when one part of the application needs to perform a task that could take a long time, or when different parts of the application need to be decoupled from each other for flexibility and scalability. If you need to process large numbers of messages in a distributed environment, it can help you solve your problems. One such scenario to use a queue is when you need to deal with webhooks. Webhook handler endpoints usually need to respond with 2xx` quickly, therefore, you cannot put long running tasks inside that handler, but you also need to process the incoming data. A good way of mitigating this is to put the incoming data into the queue, and respond quickly. The processing gets taken care of with the BullMQ worker, and if it is set up correctly, it will run inside a child process not blocking the main thread. Prerequisites BullMQ utilizes Redis to handle its message queue. In development mode, we are using docker-compose` to start up a redis instance. We expose the redis docker container's `6379` port to be reachable on the host machine. We also mount the `/misc/data` and the `misc/conf` folders to preserve data for our local development environments. `yaml version: '3' services: ## Other docker containers ... redis: image: 'redis:alpine' command: redis-server /usr/local/etc/redis/redis.conf ports: - '6379:6379' volumes: - ./misc/data:/var/lib/redis - ./misc/conf:/usr/local/etc/redis/ environment: - REDISREPLICATION_MODE=master ` We can start up our infrastructure with the docker-compose up -d` command and we can stop it with the `docker-compose stop` command. We also need to set up connection information for BullMQ. We make it configurable by using environment variables. `typescript // config.constants.ts export const REDISQUEUE_HOST = process.env.REDIS_QUEUE_HOST || 'localhost'; export const REDISQUEUE_PORT = process.env.REDIS_QUEUE_PORT ? parseInt(process.env.REDISQUEUE_PORT) : 6479; ` To start working with BullMQ, we also need to install it to our node project: `bash npm install bullmq ` Setting up a queue Creating a queue is pretty straightforward, we need to pass the queue name as a string and the connection information. `typescript // queue.ts import { Queue } from 'bullmq'; import { REDISQUEUE_HOST, REDISQUEUE_PORT, } from './config.constants'; export const myQueue = new Queue('my-queue', { connection: { host: REDISQUEUE_HOST, port: REDISQUEUE_PORT, }, }); ` We also create a function that can be used to add jobs to the queue from an endpoint handler. I suggest setting up a rule that removes completed and failed jobs in a timely manner. In this example we remove completed jobs after an hour from redis, and we leave failed jobs for a day. These values depend on what you want to achieve, It can very well happen that in a production app, you would keep the jobs for weeks. `typescript // queue.ts import { Queue, Job } from 'bullmq'; // ... const DEFAULTREMOVE_CONFIG = { removeOnComplete: { age: 3600, }, removeOnFail: { age: 24 3600, }, }; export async function addJobToQueue(data: T): Promise> { return myQueue.add('job', data, DEFAULTREMOVE_CONFIG); } ` It would be called when a specific endpoint gets called. `typescript // main.ts app.post('/', async (req: Request, res: Response, next: NextFunction) => { const job = await addJobToQueue(req.body); res.json({ jobId: job.id }); return next(); }); ` The queue now can store jobs, but in order for us to be able to process those jobs, we need to set up a worker. Put the processing into a thread We set up a worker with an async function at the beginning. The worker needs the same name as the queue to start consuming jobs in that queue. It also needs the same connection information as the queue we set up before. `typescript // worker.ts import { Job, Worker } from 'bullmq'; import { REDISQUEUE_HOST, REDISQUEUE_PORT, } from './config.constants'; let worker: Worker export function setUpWorker(): void { worker = new Worker('my-queue', async () => {/ ... */}, { connection: { host: REDISQUEUE_HOST, port: REDISQUEUE_PORT, }, autorun: true, }); defaultWorker.on('completed', (job: Job, returnvalue: 'DONE') => { console.debug(Completed job with id ${job.id}`, returnvalue); }); defaultWorker.on('active', (job: Job) => { console.debug(Completed job with id ${job.id}`); }); defaultWorker.on('error', (failedReason: Error) => { console.error(Job encountered an error`, failedReason); }); } // we call the method after we set up the queue in queue.ts import { Queue } from 'bullmq'; import { setUpWorker } from './worker'; // ... setUpWorker(); ` After we create the worker and set up event listeners, we call the setUpWorker()` method in the `queue.ts` file after the `Queue` gets created. Let's set up the job processor function. `typescript // job-processor.ts import { Job } from 'bullmq'; module.exports = async function jobProcessor(job: Job): Promise { await job.log(Started processing job with id ${job.id}`); console.log(Job with id ${job.id}`, job.data); // TODO: do your CPU intense logic here await job.updateProgress(100); return 'DONE'; }; ` This example processor function doesn't do much, but if we had a long running job, like complex database update operations, or sending data towards a third-party API, we would do it here. Let's make sure our worker will run these jobs on a separate thread. `typescript // worker.ts // ... let worker: Worker const processorPath = path.join(dirname, 'job-processor.js'); export function setUpWorker(): void { worker = new Worker('my-queue', processorPath, { connection: { host: REDISQUEUE_HOST, port: REDISQUEUE_PORT, }, autorun: true, }); // ... } ` If you provide a file path to the worker as the second parameter, BullMQ will run the function exported from the file in a separate thread. That way, the main thread is not used for the CPU intense work the processor does. The above example works if you run the TypeScript compiler on your back-end code (tsc`), but if you prefer keeping your code in TypeScript and run the logic with `ts-node`, then you should use the TypeScript file as your processor path. `typescript const processorPath = path.join(dirname, 'job-processor.ts'); ` The problem with bundlers Sometimes, your back-end code gets bundled with webpack. For example, if you use NX to keep your front-end and back-end code together in one repository, you will notice that your back-end code gets bundled with webpack. In order to be able to run your processors in a separate thread, you need to tweak your project.json` configuration: `json { "targets": { "build": { "options": { "outputPath": "dist/apps/api", "main": "apps/api/src/main.ts", "tsConfig": "apps/api/tsconfig.app.json", "assets": [], "additionalEntryPoints": [ { "entryName": "sync.processor", "entryPath": "apps/api/src/app/queue/job-processor.ts" } ] } } } } ` Conclusion In an ExpressJS application, running CPU intense tasks on the main thread could cause your endpoints to turn unresponsive and/or slow. Moving these tasks into a different thread can help alleviate performance issues, and using BullMQ can help you out greatly. If you want to learn more about NodeJS, check out node.framework.dev for a curated list of libraries and resources. If you are looking to start a new ExpressJS project, check out our starter kit resources at starter.dev...
Feb 24, 2023
4 mins
Introducing the express-typeorm-postgres Starter Kit
At This Dot, we've been working with ExpressJS APIs for a while, and we've created a starter.dev kit for ExpressJS that you can use to scaffold your next backend project....
Jan 13, 2023
5 mins
Performance Analysis with Chrome DevTools
When it comes to performance, developers often use Lighthouse or similar performance analysis tools. But when the target site has protection against bots, getting information is not that simple. Chrome Devtools can help you with your performance analysis....
Jan 9, 2023
6 mins
Introducing @this-dot/rxidb
When we are working on PWAs, sometimes we need to implement features that require us to store data on our user's machine. One way to do that is to use IndexedDb. Our team at This Dot has developed @this-dot/rxidb to create an RxJS wrapper around it....
Oct 13, 2022
6 mins
How to Set Up OAuth with a Stripe App
Stripe Apps are a great way to extend Stripe dashboard functionality using third-party integrations. But when using these integrations, developers must prioritize security. The best way to do this is by using OAuth with the third-party product with which you would like to integrate. However, there are some constraints, and we cannot use cookies to set up a cookie based authentication front-end only. In this article, we would like to show you how to do it with a NestJS back-end. Stripe signatures The best way to secure your API is by making sure that every request comes from a verified Stripe App instance. The @stripe/ui-extension-sdk` package provides a way to generate a signature on the front-end side. This signature is valid for 5 minutes, and you can send it as a header for every request you make. For this to work, you need to have `@stripe/ui-extension-sdk` installed in your repository. `typescript import fetchStripeSignature from "@stripe/ui-extension-sdk/signature"; // fetchStripeSignature returns with a Promise ` In order to properly validate this signature on your API, you will need some additional information to be sent in the request headers as well. That information is the Stripe user's ID, and the Stripe account's ID. We found that the best way is to implement a global context with this information. `typescript import { createContext } from "react"; import { ExtensionContextValue } from "@stripe/ui-extension-sdk/context"; export const GlobalContext = createContext({ userContext: null, environment: null }); ` The above context stores the ExtensionContextValue` that gets passed from the Stripe dashboard to the app when it opens in the view. For example, if you are on a payment detail page, the `userContext` will contain information about your Stripe user, while the `environment` will provide you access to the object that you are viewing. In the above example, that would be the payment's ID as the `objectContext.id` property. Let's set up the view with this global context. `tsx import type { ExtensionContextValue } from "@stripe/ui-extension-sdk/context"; import { ContextView } from "@stripe/ui-extension-sdk/ui"; import { GlobalContext } from "./common/global-context"; const PaymentDetailView = ({ userContext, environment, }: ExtensionContextValue) => ( TODO: navigation and login will come here. ); export default PaymentDetailView; ` Now, we can set up a hook to provide a proper fetch method that always appends a Stripe signature, and the other required fields to the headers. useFetchWithCredentials hook In order to make our future job easier, we need to set up a hook that creates a proper wrapper around fetch`. That wrapper will handle setting the headers for us. It needs to have access to our `GlobalContext`, so we can get the Stripe user's, and their account's, IDs. `typescript import { ExtensionContextValue } from "@stripe/ui-extension-sdk/context"; import fetchStripeSignature from "@stripe/ui-extension-sdk/signature"; import { useCallback, useContext } from "react"; import { GlobalContext } from "../common/global-context"; export function useFetchWithCredentials() { const globalContext = useContext(GlobalContext); return useCallback( async (uri: string, { headers, ...options }: RequestInit = {}) => { const stripeSignature = await fetchStripeSignature(); const headersObject = new Headers(headers); headersObject.append("stripe-signature", stripeSignature); headersObject.append("Content-Type", "application/json"); headersObject.append( "stripe-user-id", globalContext.userContext?.id ?? "" ); headersObject.append( "stripe-account-id", globalContext.userContext?.account.id ?? "" ); return fetch(uri, { ...options, headers: headersObject, }); }, [globalContext] ); } ` Let's set up a very basic component for demonstrating the use of the useFetchWithCredentials` hook. This component will be the default route for our app's navigation wrapper. It is going to handle more later. But for now, let's just implement a basic use for our hook. The `AUTH_INIT_URL` constant will point at our back-end's `/api/oauth/userinfo` endpoint. Please note that, for this to work, you are going to need to install react-router-dom`. `tsx import { Box, Spinner } from "@stripe/ui-extension-sdk/ui"; import { useEffect } from "react"; import { useNavigate } from "react-router-dom"; import { AUTHINIT_URL } from "../constants/auth.urls"; import { setUser } from "../auth/state"; import { useFetchWithCredentials } from "../hooks/useFetchWithCredentials"; export const AuthInit: React.FC = ({ redirectPath, }) => { // Please note, that we are going to set the whole routing up in a later article. const navigate = useNavigate(); const fetchWithCredentials = useFetchWithCredentials(); useEffect(() => { fetchWithCredentials(AUTHINIT_URL) .then((user) => { // Make sure you set the user in your chosen global state management tool. setUser(user); // For now if the response is a success response (status 200), we are going to navigate to the first authenticated route. navigate(redirectPath); }) .catch((e) => { console.error(e.message); // If the request returns with an error (status 401), it means that the user is unauthenticated, so we send them to the login page navigate("/login"); }); }, [redirectPath]); // Let's display a spinner while we wait for our initial request to return. return ( Loading... ); }; ` As we can see from the above implementation, this component will be the initial component that gets rendered inside of the application. It will send out a request to determine if the user is logged in. If they are logged in, we are going to send them to a route that is the first page of our application. If they are not signed in, we are going to redirect them to our login page. This initial call, just as every other API call, must be verified and always have a Stripe signature. Let's visualise how routing looks like right now: `tsx import type { ExtensionContextValue } from "@stripe/ui-extension-sdk/context"; import { ContextView } from "@stripe/ui-extension-sdk/ui"; import { GlobalContext } from "./common/global-context"; import { Route, Routes } from 'react-router-dom'; import { PaymentInfo } from './components/PaymentInfo; const PaymentDetailView = ({ userContext, environment, }: ExtensionContextValue) => ( } /> } /> }> ); export default PaymentDetailView; ` Stripe secrets and the Stripe API In order to be able to use the Stripe NodeJS Api, you will need two secrets from Stripe. One is your Stripe account's API key, and the other one is your Stripe-app's secret. You need to set up your .env` file as the following. `text STRIPEAPI_KEY='your api key goes here' STRIPEAPP_SECRET='your app secret goes here' ` Stripe API key You can find your Stripe API key at https://dashboard.stripe.com/apikeys, under the Standard keys` section. The key you are looking for is called `Secret key`, and you need to reveal it by clicking the button that hides it. Stripe App Secret For this key, you are going to need to upload your stripe-app using the stripe apps upload` command. Make sure that you set a development app ID in your app manifest (`stripe-app.json`). After you uploaded your app, visit https://dashboard.stripe.com/apps. Under `My Apps`, you should see your uploaded application. Open it and search for the `Signing secret`. Reveal it and copy it into your `.env` file. Stripe NodeJS API Please make sure you have installed the stripe` nmp package for your server code. In this example series, we use NestJS as our framework for our API. We need the above two secret keys to be able to start up our Stripe API. `typescript // verify-signature.ts import { BadRequestException, Logger } from "@nestjs/common"; import { Stripe } from "stripe"; const STRIPEAPI = new Stripe(process.env.STRIPE_API_KEY, { apiVersion: "2020-08-27", }); const APPSECRET = process.env.STRIPE_APP_SECRET; export function verifySignature( userId: string, accountId: string, signature: string, logger: Logger ): void { // Signature verification will come here } ` NestJS VerifySignatureInterceptor implementation In NestJS, we can use interceptors to abstract away repetitive logic that needs to be done on multiple requests. In our case, we need to verify almost every API for a valid Stripe signature. We have access to the proper secret keys, and we have a Stripe NodeJS API set up. Let's create our VerifySignatureInterceptor`. `typescript import { BadRequestException, CallHandler, ExecutionContext, Injectable, Logger, NestInterceptor, } from "@nestjs/common"; import { Request } from "express"; import { Observable } from "rxjs"; import { Stripe } from "stripe"; const STRIPEAPI = new Stripe(process.env.STRIPE_API_KEY, { apiVersion: "2020-08-27", }); const APPSECRET = process.env.STRIPE_APP_SECRET; @Injectable() export class VerifySignatureInterceptor implements NestInterceptor { // We set up a logger instance, so we can properly log errors private readonly logger = new Logger(VerifySignatureInterceptor.name); intercept(context: ExecutionContext, next: CallHandler): Observable { const req: Request = context.switchToHttp().getRequest(); const signature = req.headers["stripe-signature"] as string; const userId = req.headers["stripe-user-id"] as string; const accountId = req.headers["stripe-account-id"] as string; verifySignature(userId, accountId, signature, this.logger); return next.handle(); } } ` Every interceptor must implement the intercept()` method. We extract the `Request` object from the execution context, and we get the headers that we previously set in our `useFetchWithCredentials` hook. We call our `verifySignature` function which will throw errors if the signature is invalid. We also pass the `Logger` instance, so we can determine when an error comes from this interceptor in our logs. Please be aware that there are several reasons signature verification can go wrong, like if we provide the wrong Stripe account keys or app secrets. In order for you to be able to easily debug these issues, proper logging is a must. That is why we set up a Logger` instance in our interceptor. `typescript // ... export function verifySignature( userId: string, accountId: string, signature: string, logger: Logger ): void { if (!(userid && account_id && signature)) { throw new BadRequestException("Missing user identifiers"); } try { stripe.webhooks.signature.verifyHeader( JSON.stringify({ userid, account_id }), signature, APPSECRET ); } catch (e: any) { logger.error(Could not verify signature due to: ${e.message}`); throw new BadRequestException("Could not verify signature"); } } ` If the user_id`, `account_id`, or the `signature` are missing, that could mean that the request came from outside a stripe application, or the `useFetchWithCredentials` hook was not used. We throw a `BadRequestException` that will result in the request sending back a `status: 400` HTTP response. If the signature verification fails, that could mean that a not valid signature was used in the request, or that the API environment variables might have the wrong keys. Set up the userinfo endpoint Let's quickly set up our /api/oauth/userinfo` endpoint. For that, we are going to create the `OauthModule` and the `OauthController`. `typescript // oauth.module.ts import { Module } from "@nestjs/common"; import { OauthController } from "./oauth.controller"; @Module({ controllers: [OauthController], }) export class OauthModule {} ` In our controller, we decorate our getUserInfo()` method, with the `@Get()` decorator, so we set up the route. We also decorate the method with the `@UseInterceptors()` decorator, where we pass our `VerifySignatureInterceptor`. `typescript // oauth.controller.ts import { Controller, Get, Headers, Logger, UnauthorizedException, UseInterceptors, } from "@nestjs/common"; import { VerifySignatureInterceptor } from "./interceptors/verify-signature.interceptor"; import { UserInfo } from "../interfaces/user"; @Controller("oauth") export class OauthController { // We set up our Logger instance here as well private readonly logger = new Logger(OauthController.name); @Get("userinfo") @UseInterceptors(VerifySignatureInterceptor) async getUserInfo( @Headers("stripe-account-id") accountId: string, @Headers("stripe-user-id") userId: string ): Promise { // For now, we always throw an unauthorised exception, so our front-end will load the login page throw new UnauthorizedException(); } } ` This setup will enable us to call the /api/oauth/userinfo` endpoint which will, in-turn, check if we have a valid signature present in the headers. If the request is invalid, it will throw a `400 Bad Request` exception. If the signature is valid, for now, we will throw a `401 Unauthorized` exception just to make our front-end navigate to the login page. The Login flow Just to keep this example simple, our login page will only have a button in the center that will start our login flow with our API. `tsx import fetchStripeSignature from '@stripe/ui-extension-sdk/signature'; import { LOGINURI } from '../../constants/url.constants'; import { Box, Button } from '@stripe/ui-extension-sdk/ui'; import { GlobalContext } from '../../common/global-context'; export const Login: React.FC = () => { const globalContext = useContext(GlobalContext); const [stateKey, setStateKey] = useState(null); // setting the stateKey will be implemented here const queryParams = new URLSearchParams({ state: stateKey as string, }) // LOGINURI points to our API at the '/api/oauth/login' endpoint const loginUrl = ${LOGIN_URI}?${queryParams}` return ( Sign in ) } ` We need to create a state key, that can be validated before we fetch the token. This state key will first be sent to our third-party oauth client, and it will be returned to us when the authentication is finished. This key is passed securely and over https. Therefore, it can be a stringified object. While the key is not set, we disable the button. `tsx import fetchStripeSignature from "@stripe/ui-extension-sdk/signature"; import { LOGINURI } from "../../constants/url.constants"; import { Box, Button } from "@stripe/ui-extension-sdk/ui"; import { GlobalContext } from "../../common/global-context"; export const Login: React.FC = () => { const globalContext = useContext(GlobalContext); const [stateKey, setStateKey] = useState(null); useEffect(() => { // we create an async function which will get all the necessary data and then call JSON.stringify() on it const getStateKey = async () => { const signature = await fetchStripeSignature(); const userId = globalContext.userContext?.id; const accountId = globalContext.userContext?.account.id; return JSON.stringify({ userId, accountId, signature }); }; getStateKey().then(setStateKey); }, [globalContext.userContext]); const queryParams = new URLSearchParams({ state: stateKey as string, }); // LOGINURI points to our API at the '/api/oauth/login' endpoint const loginUrl = ${LOGIN_URI}?${queryParams}`; return { / ... */ }; }; ` Pressing the Sign in` button will call our API that will redirect us to our third-party login screen. When the login happens, it will redirect us to our API, where we can fetch a valid token and redirect again to the Stripe dashboard. Let's extend our environment variables. `text STRIPEAPI_KEY='your api key goes here' STRIPEAPP_SECRET='your app secret goes here' STRIPEREDIRECT_URL='https://dashboard.stripe.com/test/apps-oauth/your.app.id' The above url is set to the development preview redirect url. In production, this url will look like the following: STRIPE_REDIRECT_URL='https://dashboard.stripe.com/apps-oauth/your.app.id' Don't forget that your app-id in development and in production should be different THIRDPARTY_CLIENT_ID='your client id goes here' THIRDPARTY_CLIENT_SECRET='your client secret goes here' THIRDPARTY_URL_BASE='https://third-party.com' APIHOST_URL='http://localhost:3333' In production, the above url should point to your deployed back-end ` Now that we have every environment variable set up, let's implement our api/oauth/login` and `api/oauth/authorise` endpoints in our `OauthController`. `typescript // ... const THIRDPARTY_OAUTH_URL = `${process.env.THIRD_PARTY_URL_BASE}/oauth`; const APIAUTH_CALLBACK_URL = `${process.env.API_HOST_URL}/api/oauth/authorise`; @Controller("oauth") export class OauthController { // ... @Get("login") @Redirect(THIRDPARTY_OAUTH_URL, 303) // the HasValuePipe checks if the state is not an empty string or undefined. login(@Query("state", HasValuePipe) state: string): { url: string } { const queryParams = new URLSearchParams({ responsetype: "code", clientid: process.env.THIRD_PARTY_CLIENT_ID, redirecturi: API_AUTH_CALLBACK_URL, state, }); // with the query parameters set, we redirect to our third-party oauth page return { url: ${THIRD_PARTY_OAUTH_URL}?${queryParams.toString()}`, }; } } ` The login endpoint, if everything is correct, redirects us to the login page where the user should be able to log in. Make sure that if you oauth client needs to have configured redirect urls, you configure them. For example, for development, the http://localhost:3333/api/oauth/authorise` endpoint should be in the allowed redirect url list. `typescript @Controller("oauth") export class OauthController { // ... @Get("authorize") @Redirect(process.env.STRIPEREDIRECT_URL, 303) async loggedIn( @Query("state", HasValuePipe) state: string, @Query("code", HasValuePipe) code: string ) { // If either the state or the code is missing, we return with a 400 Bad Request response if (!state || !code) { throw new BadRequestException(); } let userId: string; let accountId: string; let signature: string; try { const = ({ userId, accountId, signature } = JSON.parse(state)); } catch (error: any) { // If the state is not a valid JSON we can be sure that we won't be able to this.logger.error(Invalid state returned to the authorise endpoint`); throw new BadRequestException(); } // We verify the signature to make sure it comes from our Stripe app. verifySignature(userId, accountId, signature, this.logger); // see implementation below await this.fetchToken(accountId, userId, code).catch( (error: AxiosError) => { if (error.response) { throw new UnauthorizedException(); } throw new InternalServerErrorException( "Cannot contact authentication server" ); } ); } } ` We validate everything to be sure that this endpoint was called from our third-party OAuth page. With the information available to us, we can fetch the access token and store it in the Stripe Secret Storage. In this example, we use axios` in our bakc-end to send requests to our third-party API. `typescript // ... const THIRDPARTY_TOKEN_URI = `${process.env.THIRD_PARTY_URL_BASE}/token`; @Controller("oauth") export class OauthController { // ... constructor(private secretService: SecretService) {} // ... private async fetchToken( accountId: string, userId: string, code: string ): Promise { const data = { granttype: "authorization_code", clientid: process.env.THIRD_PARTY_CLIENT_ID, clientsecret: process.env.THIRD_PARTY_CLIENT_SECRET, code, }; const response = await axios.post(THIRDPARTY_TOKEN_URI, data, { responseType: "json", }); // Please note that the third-party API you integrate with might have a different response structure. const { accesstoken } = response.data; // We set the token in the secret store. See the implementation below. The Secret Store only accepts strings as values. // The accountId is needed so we can scope the request to the requestor user's Stripe account. // The userId is needed so we can use the requestor user's secrets // We set the secret name to 'accesstoken', and we pass the token as its value. await this.secretService.addSecret( accountId, userId, "accesstoken", accesstoken ); } } ` We exchange our code` returned from our OAuth client to a valid access token, and then store it in the Stripe Secret Store. That logic got extracted into a `SecretService` class, because the logic implemented in it can be reused later for other API calls. Please make sure you set up a NestJS module that exports this service. Stripe Secret Store Stripe's Secret Store API enables your app to securely store and retrieve strings that can be authentication credentials, tokens, etc. This API enables users to stay logged in to third party services even when they log out of their Stripe dashboard. Let's set up a service that handles access to the Secret Store on our back-end. `typescript import { Stripe } from "stripe"; interface Secret { id: string; name: string; payload: string; } // With the below setup, we can communicate with the Stripe Secret Store. const SecretResource = Stripe.StripeResource.extend({ find: Stripe.StripeResource.method({ method: "GET", path: "apps/secrets/find", }) as (...args: any[]) => Promise, set: Stripe.StripeResource.method({ method: "POST", path: "apps/secrets", }) as (...args: any[]) => Promise, delete: Stripe.StripeResource.method({ method: "POST", path: "apps/secrets/delete", }) as (...args: any[]) => Promise, }); @Injectable() export class SecretService { // To make calls for connected accounts, we should create a new Stripe API instance every time. private getSecretResource(stripeAccount: string): Stripe { const client = new Stripe(process.env.STRIPEAPI_KEY, { apiVersion: "2020-08-27", stripeAccount, }); return new SecretResource(client); } } ` Adding secrets As we can see above, the Secret Storage needs some preliminary setup, which we do in our SecretService`. The `StripeResource` sets up the `find`, `set`, and `delete` methods on the Stripe Api, and interacts with the Secret Store. Let's implement the `addSecret` method, so we can actually store our returned token. `typescript import { Stripe } from "stripe"; interface Secret { id: string; name: string; payload: string; } @Injectable() export class SecretService { // ... async addSecret( accountId: string, userId: string, secretName: string, value: string ): Promise { return this.getSecretResource(accountId) .set({ "scope[type]": "user", "scope[user]": userId, name: secretName, payload: value, }) .catch((error: any) => { this.logger.error( Could not set secret to Stripe Secret Store: ${error.statusCode} - ${error.message}` ); return null; }); } } ` With the above, we can finally store our token with which we can make authenticated requests. Getting secrets Let's implement the getSecret` so we can retrieve secrets. The principles are the same. We will need the `accountId`, the `userId`, and the secret's name for it. `typescript import { Stripe } from "stripe"; interface Secret { id: string; name: string; payload: string; } @Injectable() export class SecretService { // ... async getSecret( accountId: string, userId: string, secretName: string ): Promise { const secret = await this.getSecretResource(accountId) .find({ "scope[type]": "user", "scope[user]": userId, name: secretName, "expand[]": "payload", }) .catch((error: any) => { if (error.statusCode === 404) { throw new UnauthorizedException(); } else { this.logger.error( Could not get secret from Stripe Secret Store: ${error.statusCode} - ${error.message}` ); return null; } }); if (!secret) { throw new UnauthorizedException(); } return secret.payload; } } ` Let's close the login flow, and implement the final version of the api/oauth/userinfo` endpoint. `typescript // ... const THIRDPARTY_WHO_AM_I_URL = `${process.env.THIRD_PARTY_URL_BASE}/oauth/whoami`; @Controller("oauth") export class OauthController { // ... constructor(private secretService: SecretService) {} @Get("userinfo") @UseInterceptors(VerifySignatureInterceptor) async getUserInfo( @Headers("stripe-account-id") accountId: string, @Headers("stripe-user-id") userId: string ): Promise { const token = await this.secretService.getSecret( accountId, userId, "accesstoken" ); const user = await axios .get(THIRDPARTY_WHO_AM_I_URL, { responseType: "json", headers: { authorization: Bearer ${token}`, }, }) .catach(() => { throw new UnauthorizedException(); }); // We add an extra layer of security by requiring the user to verify their e-mail. if (!user.emailverified) { throw new UnauthorizedException(); } return user; } } ` Deleting secrets We want our users to have ability to log out from our third-party API as well. That can be achieved by deleting their access_token` from the Secret store. `typescript import { Stripe } from "stripe"; // ... @Injectable() export class SecretService { // ... async deleteSecret( accountId: string, userId: string, secretName: string ): Promise { return this.getSecretResource(accountId) .delete({ "scope[type]": "user", "scope[user]": userId, name: secretName, }) .then(() => true) .catch((error: any) => { this.logger.error( Could not delete secret from Stripe Secret Store: ${error.statusCode} - ${error.message}` ); return false; }); } } ` The /api/oauth/logout` endpoint is going to be a `GET` request, that will delete the token from the Secret Store. `typescript // ... @Controller("oauth") export class OauthController { // ... @Get("logout") @HttpCode(204) @UseInterceptors(VerifySignatureInterceptor) async deleteToken( @Headers("stripe-account-id") accountId: string, @Headers("stripe-user-id") userId: string ): Promise { return this.secretService.deleteToken(accountId, userId, "accesstoken"); } } ` We can create a SignOutLink` that will send the request to our back-end and navigates to the `/login` page. You can put this component into the `footerContent` property of your `ContextView`. `tsx import { LOGOUTURI } from "../../constants/url.constants"; import { useFetchWithCredentials } from "../../hooks/useFetchWithCredentials"; import { Link } from "@stripe/ui-extension-sdk/ui"; import { useNavigate } from "react-router-dom"; export const SignOutLink = () => { const navigate = useNavigate(); const fetchWithCredentials = useFetchWithCredentials(); return ( { fetchWithCredentials(LOGOUTURI).then(() => { navigate("/logout"); }); }} > Sign out ); }; ` And now we are ready with our authentication setup. When the user opens our app, it will call the /api/oauth/userinfo` endpoint. Initially, it will return with a 401 error, and our front-end will navigate to the `/login` route. When the user presses the `Sign in` button, it will redirect them to the third-party OAuth page. After they log in, our back-end also redirects them back to their Stripe dashboars where the application will open. The app will call the `/api/oauth/userinfo` endpoint again. But this time, it will return an actual user information and it routes to the protected route. To help visualize the whole flow, you can also use the following sequence diagram for reference: Conclusion As you can see, there are many steps involved in setting up a proper OAuth flow. However, it's necessary to make it right, since this is the most critical part of the app. We hope blog post article will help you to set up some good foundations when implementing your own Stripe app....
May 24, 2022
8 mins
Cypress testing your IndexedDb contents with @this-dot/cypress-indexeddb
There are several use-cases where an application uses indexedDb to store data locally. Accessing indexedDb during tests is not that straightforward, that's why we created this cypress helper library. Introducing @this-dot/cypress-indexeddb...
Jan 6, 2022
4 mins
Getting Authenticated Images in Angular
Sometimes some applications need to display images on a page, which is only accessible with authentication. But using simply the src` attribute of an `` tag will only accept images that are not authenticated. How can you circumvent this issue?...
Sep 9, 2021
5 mins
Introducing our first open-source library: @this-dot/route-config
While we were working on an internal project, we found we were able to solve an issue that is common during application development. We love to give back to the community. Therefore, we've decided to open-source it....
Aug 9, 2021
4 mins
How to set up screenshot comparison testing with cypress inside an NX workspace
Sometimes we need to refactor an application which can break the layout. Screenshot comparison tests can provide you with a secure safety net. In this blog post, I'd like to show you how to set up such tests in an NX monorepo....
Aug 6, 2021
6 mins
NX e2e testing with AWS Amplify
CI/CD helps you automate most of your testing and build processes. AWS Amplify can help you with that, but sometimes it is not that straightforward. In this guide, we show you how to set up e2e testing with an NX workspace using Amplify build tools....
May 5, 2021
4 mins