Connecting to API Backend
Configuring your SPA to work with a backend API
When building a single page app (SPA) with a backend API, there are a few important considerations. In an application with this architecture, there is typically a JavaScript frontend that uses an API to manage application data and functionality.
Passage Configuration
An "application" in Passage does not specify how that app is implemented. For a SPA and API implementation, you should configure your Passage app as follows:
Set the auth origin to the domain of your frontend application
Set the redirect URL to the correct path for your app (e.g. "/" or "/dashboard")
Generate an API Key on the settings page for use in the backend API code
App Setup
For the frontend app, the key difference is in how the auth tokens get sent to the API. Since the frontend and backend are on different hosts, the cookies set by Passage (psg_auth_token
) will not automatically get sent. There are two options:
Cookie Auth
Manually set the cookie in the axios configuration for authenticated requests to the API.
To use this option, you will need to set the withCredentials
CORs option on the backend API server as well.
Header Auth
The most common options for SPAs with backend APIs is to send auth tokens in the "Authorization" request header. This can be done from JavaScript as shown below. Note that the the default CORS settings will work just fine for this authentication type.
No additional server configurations are required, but make sure to set the auth strategy on the Passage class.
Examples
Last updated