This guide will show you how to authenticate with Logto in your Single Page Application (SPA) tests.
Authentication is a crucial part of any web application, and it's essential to ensure that authentication guards work as expected in Single Page Applications (SPAs). In this guide, we'll walk you through the process of authenticating with Logto in your Cypress tests, allowing you to effectively test your SPA's authentication flow.
Before diving in, ensure you have the following ready:
A Logto account. If you don't have one, you can sign up Logto cloud for free.
A Single Page Application (SPA) that integrate with Logto for authentication. If you don't have one, please follow our create-and-integrate-the-first-app guide, create and register a new application in Logto.
Integrate Logto with your SPA application using our out-of-box SDK. e.g. React SDK
You may follow our sign-in experience guide to customize the sign-in experience for your own SPA application. Simulate the sign-in flow in your Cypress tests accordingly.
Complete the Cypress installation and configuration. This guide assumes you have a well setup Cypress environment and you are able to run your Cypress tests already.
Bring up your Logto service and the client application.
We will use our React SPA Sample application as an example in this guide. You can find the source code here.It's a simple React application that integrate with Logto using Logto React SDK for authentication.
http://localhost:3001/sign-inhttp://localhost:3000username/passwordLet's write a custom Cypress command to authenticate with Logto in your Cypress tests. Using the custom command, you can easily authenticate with Logto in any of your Cypress tests.
Visit your client application sign-in page in Cypress test, and init the sign-in flow by clicking on the sign-in button.
Navigate to the Logto sign-in page, and fill in the username and password to sign in.
In normal use, a single Cypress test may only run commands in a single origin, a limitation determined by standard web security features of the browser. The cy.origin() command allows your tests to bypass this limitation.
After a successful sign-in, you should be able to redirect back to your client application.
Wrap up the entire sign-in flow as a custom Cypress command. cy.signIn in this example.
In any of your Cypress tests, you can use the custom Cypress command to authenticate with Logto.
Congratulations! You have successfully authenticated with Logto in your Cypress tests. You can now focus on testing your SPA application without worrying about the authentication flow.