Skip to content
This repository was archived by the owner on Oct 16, 2024. It is now read-only.

Commit 4482364

Browse files
apoblettsdylanbrookes
apobletts
and
dylanbrookes
authored
Update READMEs (#6)
* initial commit * remove extra images * PR changes * change title size for 01 example * tidy css * update readmes Co-authored-by: Dylan Brookes <[email protected]>
1 parent 3a18a12 commit 4482364

File tree

3 files changed

+153
-128
lines changed

3 files changed

+153
-128
lines changed

‎01-Login/README.md

Whitespace-only changes.

‎02-Login-With-Profile/README.md

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
2+
# Using Passage for Login and Profile Pages
3+
4+
In addition to login and regsitration functionality, Passage also provides a pre-built profile page that enables users to view and edit their public account data. This repo is an example of how to build a login and profile expereince using Passage in a Node.js web application built with Express.
5+
6+
## Setup
7+
8+
The [Passage Node.js SDK](https://www.npmjs.com/package/@passageidentity/passage-node) requires a configuration object. For this example app, we'll need to provide our application with a Passage App ID and API Key, which can be set in the `.env` file. Your App ID and API Key can be found in the [Passage Console](https://console.passage.id) in your App Settings. A sample `.env` file is shown here:
9+
10+
```
11+
PASSAGE_APP_ID=
12+
PASSAGE_API_KEY=
13+
PORT=
14+
```
15+
16+
## Run With Node
17+
18+
To run this example app, make sure you have [node.js installed on your computer](https://nodejs.org/en/download/).
19+
20+
To install the dependencies:
21+
22+
```bash
23+
npm i
24+
```
25+
26+
To run the application in development mode:
27+
28+
```bash
29+
npm run dev
30+
```
31+
32+
## Run With Docker
33+
34+
Make sure you have [docker installed on your computer](https://docs.docker.com/get-docker/).
35+
36+
Create your docker image:
37+
38+
```bash
39+
$ docker build -t example-node .
40+
```
41+
42+
Run your docker container using the example-node image, changing the port numbers as necessary:
43+
44+
```bash
45+
$ docker run -p 5000:5000 example-node
46+
```
47+
48+
You can now visit http://localhost:5000 in your browser to see Passage in action.
49+
50+
## Adding Authentication to the Frontend
51+
52+
The easiest way to add authentication to a web frontend is with a Passage Element. The HTML below will automatically embed a complete UI/UX for user sign-in and sign-up. In this example application, we automatically use the PASSAGE_APP_ID environment variable in the `app-id` attribute.
53+
54+
```html
55+
<!-- Passage will populate this div with a complete authentication UI/UX. -->
56+
<passage-auth app-id="<Passage App ID>"></passage-auth>
57+
58+
<!-- Include the passage-web JavaScript from the Passage CDN. -->
59+
<script src="https://cdn.passage.id/passage-web.js"></script>
60+
```
61+
62+
## Adding a Profile Page
63+
64+
The profile page is created using the Passage Profile Element that can be imported from the the `@passageidentity/passage-elements` pacakge. In this example application, we automatically use the PASSAGE_APP_ID environment variable in the `app-id` attribute.
65+
66+
```html
67+
<!-- Passage will populate this div with a complete authentication UI/UX. -->
68+
<passage-profile app-id="<Passage App ID>"></passage-profile>
69+
70+
<!-- Include the passage-web JavaScript from the Passage CDN. -->
71+
<script src="https://cdn.passage.id/passage-web.js"></script>
72+
```
73+
74+
75+
## Authenticating an HTTP Request
76+
77+
A Node.js Express server can easily authenticate an HTTP request using the Passage SDK, as shown below. Note that authenticating requests does not require an API key.
78+
79+
```javascript
80+
import Passage from "@passageidentity/passage-node";
81+
import express from "express";
82+
83+
const app = express();
84+
const PORT = 5000;
85+
86+
let passageConfig = {
87+
appID: "YOUR_APP_ID",
88+
};
89+
90+
// example of middleware using Passage
91+
let passage = new Passage(passageConfig);
92+
let passageAuthMiddleware = (() => {
93+
return async (req: any, res: any, next: NextFunction) => {
94+
try {
95+
let userID = await passage.authenticateRequest(req);
96+
if (userID) {
97+
// successfully authenticated. save user ID and continue
98+
res.userID = userID;
99+
next();
100+
}
101+
} catch (e) {
102+
// failed authentication
103+
console.log(e);
104+
res.status(401).send("Could not authenticate user!");
105+
}
106+
};
107+
})();
108+
109+
// example usage of passage middleware
110+
app.get(
111+
"/authenticatedRoute",
112+
passageAuthMiddleware,
113+
async (req: Request, res: any) => {
114+
let userID = res.userID;
115+
// do authenticated things...
116+
}
117+
);
118+
119+
app.listen(PORT, () => {
120+
console.log(`Example app running`);
121+
});
122+
```
123+
124+
## User Management
125+
126+
The example application also demonstrates some user management functionality, such as getting a user's information. These operations are sensitive and require an API Key to retrieve information from Passage. This can be generated in the [Passage Console](https://console.passage.id).
127+
128+
```javascript
129+
// updated passage config
130+
let passageConfig = {
131+
appID: "YOUR_APP_ID",
132+
apiKey: "YOUR_API_KEY",
133+
};
134+
135+
// get user info after authenticating a route
136+
app.get(
137+
"/authenticatedRoute",
138+
passageAuthMiddleware,
139+
async (req: Request, res: any) => {
140+
let userID = res.userID;
141+
let user = passage.user.get(userID);
142+
console.log(user.email);
143+
}
144+
);
145+
```
146+

‎README.md

Lines changed: 7 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -3,134 +3,13 @@
33
<img alt="npm" src="https://img.shields.io/npm/v/@passageidentity/passage-elements?color=43BD15&label=Passage%20Elements">
44
<br/><br/>
55

6-
# Using Passage with Node.js & Express
6+
# Passage with Node.js & Express Examples
77

8-
Passage provides a Node.js package to easily authenticate HTTP requests. This repo is an example of how to use Passage in a Node.js web application built with Express.
8+
This repository contains Node.js examples for different use cases with Passage.
99

10-
## Setup
10+
## What is Passage
11+
Passage is an authentication platform that enables developers to add biometric authentication to their web and mobile applications. Passage provides a full UI/UX login and registration in a web component that can be added to any application, as well as backend libraries in Python, Go, and Node.js to support user verification. To learn more visit our [website](https://passage.id).
1112

12-
The [Passage Node.js SDK](https://www.npmjs.com/package/@passageidentity/passage-node) requires a configuration object. For this example app, we'll need to provide our application with a Passage App ID and API Key, which can be set in the `.env` file. Your App ID and API Key can be found in the [Passage Console](https://console.passage.id) in your App Settings. A sample `.env` file is shown here:
13-
14-
```
15-
PASSAGE_APP_ID=
16-
PASSAGE_API_KEY=
17-
PORT=
18-
```
19-
20-
## Run With Node
21-
22-
To run this example app, make sure you have [node.js installed on your computer](https://nodejs.org/en/download/).
23-
24-
To install the dependencies:
25-
26-
```bash
27-
npm i
28-
```
29-
30-
To run the application in development mode:
31-
32-
```bash
33-
npm run dev
34-
```
35-
36-
## Run With Docker
37-
38-
Make sure you have [docker installed on your computer](https://docs.docker.com/get-docker/).
39-
40-
Create your docker image:
41-
42-
```bash
43-
$ docker build -t example-node .
44-
```
45-
46-
Run your docker container using the example-node image, changing the port numbers as necessary:
47-
48-
```bash
49-
$ docker run -p 5000:5000 example-node
50-
```
51-
52-
You can now visit http://localhost:5000 in your browser to see Passage in action.
53-
54-
## Authenticating an HTTP Request
55-
56-
A Node.js Express server can easily authenticate an HTTP request using the Passage SDK, as shown below. Note that authenticating requests does not require an API key.
57-
58-
```javascript
59-
import Passage from "@passageidentity/passage-node";
60-
import express from "express";
61-
62-
const app = express();
63-
const PORT = 5000;
64-
65-
let passageConfig = {
66-
appID: "YOUR_APP_ID",
67-
};
68-
69-
// example of middleware using Passage
70-
let passage = new Passage(passageConfig);
71-
let passageAuthMiddleware = (() => {
72-
return async (req: any, res: any, next: NextFunction) => {
73-
try {
74-
let userID = await passage.authenticateRequest(req);
75-
if (userID) {
76-
// successfully authenticated. save user ID and continue
77-
res.userID = userID;
78-
next();
79-
}
80-
} catch (e) {
81-
// failed authentication
82-
console.log(e);
83-
res.status(401).send("Could not authenticate user!");
84-
}
85-
};
86-
})();
87-
88-
// example usage of passage middleware
89-
app.get(
90-
"/authenticatedRoute",
91-
passageAuthMiddleware,
92-
async (req: Request, res: any) => {
93-
let userID = res.userID;
94-
// do authenticated things...
95-
}
96-
);
97-
98-
app.listen(PORT, () => {
99-
console.log(`Example app running`);
100-
});
101-
```
102-
103-
## User Management
104-
105-
The example application also demonstrates some user management functionality, such as getting a user's information. These operations are sensitive and require an API Key to retrieve information from Passage. This can be generated in the [Passage Console](https://console.passage.id).
106-
107-
```javascript
108-
// updated passage config
109-
let passageConfig = {
110-
appID: "YOUR_APP_ID",
111-
apiKey: "YOUR_API_KEY",
112-
};
113-
114-
// get user info after authenticating a route
115-
app.get(
116-
"/authenticatedRoute",
117-
passageAuthMiddleware,
118-
async (req: Request, res: any) => {
119-
let userID = res.userID;
120-
let user = passage.user.get(userID);
121-
console.log(user.email);
122-
}
123-
);
124-
```
125-
126-
## Adding Authentication to the Frontend
127-
128-
The easiest way to add authentication to a web frontend is with a Passage Element. The HTML below will automatically embed a complete UI/UX for user sign-in and sign-up. In this example application, we automatically use the PASSAGE_APP_ID environment variable in the `app-id` attribute.
129-
130-
```html
131-
<!-- Passage will populate this div with a complete authentication UI/UX. -->
132-
<passage-auth app-id="<Passage App ID>"></passage-auth>
133-
134-
<!-- Include the passage-web JavaScript from the Passage CDN. -->
135-
<script src="https://cdn.passage.id/passage-web.js"></script>
136-
```
13+
## Examples in this Repo
14+
* [Authenticating with Passage](01-Login/)
15+
* [Authentication with a Profile Page](02-Login-With-Profile/)

0 commit comments

Comments
 (0)