Search…
Quickstart
Estimated Time: 7 minutes
You can follow along with one of our sample apps found on GitHub.

User Authentication with Passage

1. Add a Passage Element to Your Frontend

A Passage Element provides a complete UI/UX for users to register and login with biometrics or magic links.
In your web app, add the following code wherever you want your users to register or login:
1
<passage-auth></passage-auth>
2
<script src="https://psg.so/web.js"></script>
Copied!
You can now reload your webpage to see fully functional user authentication. Before proceeding to the next step, you will need to copy the Passage App ID from your browser's JavaScript console. The Passage App ID is printed to the console after the Passage Element is loaded.

2. Authenticate Requests on Your Web Server

After your users sign in with a Passage Element, you can use a Passage backend library to authenticate their requests. The code snippets below demonstrate how to use Passage to authenticate requests:
Go
Python (Flask)
Node.js
1
import (
2
"net/http"
3
​
4
"github.com/passageidentity/passage-go"
5
)
6
​
7
func exampleHandler(w http.ResponseWriter, r *http.Request) {
8
​
9
// Authenticate this request using the Passage SDK:
10
psg, _ := passage.New("<PASSAGE_APP_ID>", nil)
11
_, err := psg.AuthenticateRequest(r)
12
if err != nil {
13
// 🚨 Authentication failed!
14
w.WriteHeader(http.StatusUnauthorized)
15
return
16
}
17
​
18
// βœ… Authentication successful. Proceed...
19
​
20
}
Copied!
1
from passageidentity import Passage
2
import os
3
​
4
PASSAGE_APP_ID = os.environ.get("PASSAGE_APP_ID")
5
​
6
class AuthenticationMiddleware(object):
7
def __init__(self, app):
8
self.app = app
9
​
10
def __call__(self, environ, start_response):
11
request = Request(environ)
12
psg = Passage(PASSAGE_APP_ID)
13
try:
14
user = psg.authenticateRequest(request)
15
except:
16
ret = Response(u'Authorization failed', mimetype='text/plain', status=401)
17
return ret(environ, start_response)
18
environ['user'] = user
19
return self.app(environ, start_response)
Copied!
1
import Passage from "@passageidentity/passage-node";
2
​
3
const passageConfig = {
4
appID: process.env.PASSAGE_APP_ID,
5
apiKey: process.env.PASSAGE_API_KEY,
6
};
7
​
8
// example of passage middleware
9
let passage = new psg(passageConfig);
10
let passageAuthMiddleware = (() => {
11
return async (req, res, next) => {
12
try {
13
let userID = await passage.authenticateRequest(req);
14
if (userID) {
15
// user authenticated
16
res.userID = userID;
17
next();
18
}
19
} catch(e) {
20
// failed to authenticate
21
// we recommend returning a 401 or other "unauthorized" behavior
22
console.log(e);
23
res.status(401).send('Could not authenticate user!');
24
}
25
}
26
})();
27
​
28
app.get("/authenticatedRoute", passageAuthMiddleware, async(req, res) => {
29
let userID = res.userID
30
// do authenticated things...
31
});
Copied!

3. You Just Implemented Awesome User Authentication! πŸŽ‰

What's Next?

The steps above configure Passage in test mode. Users are ephemeral and are not persisted outside of your browser. To use Passage in production, claim your Passage app with the unique link in your browser's JavaScript console. You can also create a new app in the Passage Console.
Last modified 1mo ago