A hands-on guide and example to integrate Passport.js with Logto.
Passport.js is an authentication middleware for Node.js that can be unobtrusively dropped into any Express-based web application. This comprehensive guide will focus on utilizing the passport-openidconnect plugin, offering a simple yet effective way to incorporate Logto with Passport.js. Throughout this tutorial, we'll be using Express.js to build our application. All the code we'll be discussing is available in a public GitHub repository.
Before diving into the integration process, we'll need to setup the basic project with installing Express.js and its session middleware.
Assuming you have a TypeScript project environment prepared (if not, refer to the official TypeScript documentation), begin by installing the necessary packages:
Create src/app.ts with the following code:
This script initializes the Express app and configures cookieParser and session middleware for cookie-based session management, crucial for storing authentication results in Passport.js. It then uses the http module to launch the service.
To proceed, a Logto application is necessary. Create one by visiting the Logto Console, navigating to “Applications”, and clicking “Create application”. Select “Express”, name your application, and click “Create application”.
After completing or finishing reading the creation guide, you'll find a detailed page with configuration information for the next steps.
On the application details page, configure two values:
http://localhost:3000/callback to align with the project's callback route.http://localhost:3000 for simplicity, directing users to the homepage post sign-out.You can change these values later.
Install passport and the OIDC strategy plugin, passport-openidconnect:
Create app/config.ts for configuration management:
Set up the environment variables accordingly:
| Environment Variable | Description | Example |
|---|---|---|
APP_ID | App ID from Logto | 4ukboxxxxxxxxx |
APP_SECRET | App Secret from Logto | 5aqccxxxxxxx |
ENDPOINT | Logto Endpoint | https://g5xxx.logto.app/ |
Create src/passport.ts
This code initializes Passport with the OpenIDConnectStrategy. The serialize and deserialize methods are set for demonstration purposes.
Ensure to initialize and attach Passport middleware in your application:
We'll now create specific routes for authentication processes:
/sign-inThis route builds and redirects to an OIDC auth route.
/callbackThis handles the OIDC sign-in callback, stores tokens, and redirects to the homepage.
/sign-outThis redirects to Logto's session end URL, then back to the homepage.
Develop the homepage with auth state:
Here, user information is displayed using JSON.stringify, and the existence of request.user is used to protect routes.
Congratulations on integrating Passport.js with Logto. Hope this guide can help you migrate from existing systems to using Logto. For an enhanced authentication experience, consider trying out Logto Cloud today. Happy coding!