Connecting to API Backend

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 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. 
1
const authToken = localStorage.getItem("psg_auth_token");
2
axios
3
.get(`${API_URL}/${PATH}`, {
4
  headers: {
5
    Cookie: `psg_auth_token=${authToken}`,
6
  },
7
  withCredentials: true,
8
})
Copied!
To use this option, you will need to set the withCredentials CORs option on the backend API server as well.
NodeJS
Python Flask
1
const express = require("express");
2
const Passage = require("@passageidentity/passage-node");
3
const cors = require("cors");
4
​
5
const app = express();
6
app.use(express.json());
7
// cors setup for express API
8
app.use(
9
  cors({
10
    origin: CLIENT_URL,
11
    credentials: true,
12
  })
13
);
14
​
15
// use default auth strategy for passage
16
const passage = new Passage({
17
  appID: process.env.PASSAGE_APP_ID,
18
  apiKey: process.env.PASSAGE_API_KEY,
19
});
Copied!
1
from flask import Flask
2
from flask_cors impor CORS, cross_origin
3
​
4
app = Flask(__name__)
5
# set cors policy to support credentials
6
cors = CORS(app,  supports_credentials=True)
7
​
8
# use default auth strategy for passage
9
psg = Passage(PASSAGE_APP_ID, PASSAGE_API_KEY)
Copied!
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. 
1
const authToken = localStorage.getItem("psg_auth_token");
2
axios
3
.get(`${API_URL}/${PATH}`, {
4
  headers: {
5
    Authorization: `Bearer ${authToken}`,
6
  },
7
})
Copied!
No additional server configurations are required, but make sure to set the auth strategy on the Passage class.
NodeJS
Python Flask
1
const passage = new Passage({
2
  appID: process.env.PASSAGE_APP_ID,
3
  apiKey: process.env.PASSAGE_API_KEY,
4
  authStrategy: Passage.HEADER_AUTH, // default is Passage.COOKIE_AUTH
5
});
Copied!
1
psg = Passage(PASSAGE_APP_ID, PASSAGE_API_KEY, auth_strategy="HEADER")
Copied!
Examples
​React + NodeJS​

Frontend Frameworks - Previous

Angular

Next - Backend Libraries

Overview

Last modified 1mo ago

Copy link

Contents

Passage Configuration

App Setup

Examples