"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "setting-up-express-with-session", "hProperties": { "id": "setting-up-express-with-session" } }, "depth": 2, "value": "Setting up express with session" }, { "data": { "id": "prepare-the-main-file", "hProperties": { "id": "prepare-the-main-file" } }, "depth": 3, "value": "Prepare the main file" }, { "data": { "id": "creating-a-logto-application", "hProperties": { "id": "creating-a-logto-application" } }, "depth": 2, "value": "Creating a Logto application" }, { "data": { "id": "setting-uris", "hProperties": { "id": "setting-uris" } }, "depth": 3, "value": "Setting URIs" }, { "data": { "id": "configure-passportjs-with-the-application-settings", "hProperties": { "id": "configure-passportjs-with-the-application-settings" } }, "depth": 2, "value": "Configure Passport.js with the application settings" }, { "data": { "id": "install-dependencies", "hProperties": { "id": "install-dependencies" } }, "depth": 3, "value": "Install dependencies" }, { "data": { "id": "prepare-config-file", "hProperties": { "id": "prepare-config-file" } }, "depth": 3, "value": "Prepare config file" }, { "data": { "id": "initialize-passportjs-with-oidc-strategy", "hProperties": { "id": "initialize-passportjs-with-oidc-strategy" } }, "depth": 3, "value": "Initialize Passport.js with OIDC strategy" }, { "data": { "id": "building-authentication-routes", "hProperties": { "id": "building-authentication-routes" } }, "depth": 2, "value": "Building authentication routes" }, { "data": { "id": "sign-in-sign-in", "hProperties": { "id": "sign-in-sign-in" } }, "depth": 3, "value": "Sign in: /sign-in" }, { "data": { "id": "handle-sign-in-callback-callback", "hProperties": { "id": "handle-sign-in-callback-callback" } }, "depth": 3, "value": "Handle sign in callback: /callback" }, { "data": { "id": "sign-out-sign-out", "hProperties": { "id": "sign-out-sign-out" } }, "depth": 3, "value": "Sign out: /sign-out" }, { "data": { "id": "fetching-auth-state-and-protect-routes", "hProperties": { "id": "fetching-auth-state-and-protect-routes" } }, "depth": 2, "value": "Fetching auth state and protect routes" }, { "data": { "id": "conclusion", "hProperties": { "id": "conclusion" } }, "depth": 2, "value": "Conclusion" }]; const readingTime = { "minutes": 2, "words": 735, "text": "2 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", img: "img", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", table: "table", tbody: "tbody", td: "td", th: "th", thead: "thead", tr: "tr", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://www.passportjs.org/", children: "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 ", _jsx(_components.code, { children: "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 ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/passportjs-sample", children: "GitHub repository" }), "."] }), "\n", _jsxs(_components.h2, { id: "setting-up-express-with-session", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#setting-up-express-with-session", children: _jsx(_components.span, { children: "#" }) }), "Setting up express with session"] }), "\n", _jsxs(_components.p, { children: ["Before diving into the integration process, we'll need to setup the basic project with installing ", _jsx(_components.a, { href: "https://expressjs.com/", children: "Express.js" }), " and its session middleware."] }), "\n", _jsxs(_components.p, { children: ["Assuming you have a TypeScript project environment prepared (if not, refer to the ", _jsx(_components.a, { href: "https://www.typescriptlang.org/docs/", children: "official TypeScript documentation" }), "), begin by installing the necessary packages:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm i cookie-parser express-session\n" }) }), "\n", _jsxs(_components.h3, { id: "prepare-the-main-file", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#prepare-the-main-file", children: _jsx(_components.span, { children: "#" }) }), "Prepare the main file"] }), "\n", _jsxs(_components.p, { children: ["Create ", _jsx(_components.code, { children: "src/app.ts" }), " with the following code:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import http from 'node:http';\n\nimport cookieParser from 'cookie-parser';\nimport express from 'express';\nimport session from 'express-session';\n\nconst app = express();\napp.use(cookieParser());\napp.use(\n session({\n secret: 'randome secret',\n cookie: { maxAge: 14 * 24 * 60 * 60 * 1000 },\n resave: false,\n saveUninitialized: false,\n })\n);\n\nconst server = http.createServer(app);\nserver.listen(3000, () => {\n console.log('Sample app listening on http://localhost:3000');\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["This script initializes the Express app and configures ", _jsx(_components.code, { children: "cookieParser" }), " and ", _jsx(_components.code, { children: "session" }), " middleware for cookie-based session management, crucial for storing authentication results in Passport.js. It then uses the ", _jsx(_components.code, { children: "http" }), " module to launch the service."] }), "\n", _jsxs(_components.h2, { id: "creating-a-logto-application", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#creating-a-logto-application", children: _jsx(_components.span, { children: "#" }) }), "Creating a Logto application"] }), "\n", _jsxs(_components.p, { children: ["To proceed, a Logto application is necessary. Create one by visiting the ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "Logto Console" }), ", navigating to “Applications”, and clicking “Create application”. Select “Express”, name your application, and click “Create application”."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/create_application_8641e7c1ab.webp", alt: "Create application" }) }), "\n", _jsx(_components.p, { children: "After completing or finishing reading the creation guide, you'll find a detailed page with configuration information for the next steps." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/application_detail_55d0c61075.webp", alt: "Application detail" }) }), "\n", _jsxs(_components.h3, { id: "setting-uris", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#setting-uris", children: _jsx(_components.span, { children: "#" }) }), "Setting URIs"] }), "\n", _jsx(_components.p, { children: "On the application details page, configure two values:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Redirect URIs" }), ": Set this to ", _jsx(_components.code, { children: "http://localhost:3000/callback" }), " to align with the project's callback route."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Post Sign-out Redirect URIs" }), ": Use ", _jsx(_components.code, { children: "http://localhost:3000" }), " for simplicity, directing users to the homepage post sign-out."] }), "\n"] }), "\n", _jsx(_components.p, { children: "You can change these values later." }), "\n", _jsxs(_components.h2, { id: "configure-passportjs-with-the-application-settings", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configure-passportjs-with-the-application-settings", children: _jsx(_components.span, { children: "#" }) }), "Configure Passport.js with the application settings"] }), "\n", _jsxs(_components.h3, { id: "install-dependencies", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#install-dependencies", children: _jsx(_components.span, { children: "#" }) }), "Install dependencies"] }), "\n", _jsxs(_components.p, { children: ["Install ", _jsx(_components.code, { children: "passport" }), " and the OIDC strategy plugin, ", _jsx(_components.code, { children: "passport-openidconnect" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm i passport passport-openidconnect\n" }) }), "\n", _jsxs(_components.h3, { id: "prepare-config-file", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#prepare-config-file", children: _jsx(_components.span, { children: "#" }) }), "Prepare config file"] }), "\n", _jsxs(_components.p, { children: ["Create ", _jsx(_components.code, { children: "app/config.ts" }), " for configuration management:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "const appId = process.env.APP_ID;\nconst appSecret = process.env.APP_SECRET;\nconst endpoint = process.env.ENDPOINT;\nconst cookieSecret = process.env.COOKIE_SECRET ?? 'keyboard cat';\n\nexport const config = {\n appId,\n appSecret,\n endpoint,\n cookieSecret,\n};\n" }) }), "\n", _jsx(_components.p, { children: "Set up the environment variables accordingly:" }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "Environment Variable" }), _jsx(_components.th, { children: "Description" }), _jsx(_components.th, { children: "Example" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "APP_ID" }) }), _jsx(_components.td, { children: "App ID from Logto" }), _jsx(_components.td, { children: _jsx(_components.code, { children: "4ukboxxxxxxxxx" }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "APP_SECRET" }) }), _jsx(_components.td, { children: "App Secret from Logto" }), _jsx(_components.td, { children: _jsx(_components.code, { children: "5aqccxxxxxxx" }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "ENDPOINT" }) }), _jsx(_components.td, { children: "Logto Endpoint" }), _jsx(_components.td, { children: _jsx(_components.code, { children: "https://g5xxx.logto.app/" }) })] })] })] }), "\n", _jsxs(_components.h3, { id: "initialize-passportjs-with-oidc-strategy", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#initialize-passportjs-with-oidc-strategy", children: _jsx(_components.span, { children: "#" }) }), "Initialize Passport.js with OIDC strategy"] }), "\n", _jsxs(_components.p, { children: ["Create ", _jsx(_components.code, { children: "src/passport.ts" })] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import passport from 'passport';\nimport OpenIDConnectStrategy, { type Profile, type VerifyCallback } from 'passport-openidconnect';\n\nimport { config } from './config.js';\n\nconst { appId, appSecret, endpoint } = config;\n\nexport default function initPassport() {\n passport.use(\n new OpenIDConnectStrategy(\n {\n issuer: `${endpoint}/oidc`,\n authorizationURL: `${endpoint}/oidc/auth`,\n tokenURL: `${endpoint}/oidc/token`,\n userInfoURL: `${endpoint}/oidc/me`,\n clientID: appId,\n clientSecret: appSecret,\n callbackURL: '/callback',\n scope: ['profile', 'offline_access'],\n },\n (issuer: string, profile: Profile, callback: VerifyCallback) => {\n callback(null, profile);\n }\n )\n );\n\n passport.serializeUser((user, callback) => {\n callback(null, user);\n });\n\n passport.deserializeUser(function (user, callback) {\n callback(null, user as Express.User);\n });\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["This code initializes Passport with the ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "OpenIDConnectStrategy" }) }), ". The serialize and deserialize methods are set for demonstration purposes."] }), "\n", _jsx(_components.p, { children: "Ensure to initialize and attach Passport middleware in your application:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "...\ninitPassport();\n\nconst app = express();\napp.use(cookieParser());\napp.use(\n session({\n secret: 'randome secret',\n cookie: { maxAge: 14 * 24 * 60 * 60 * 1000 },\n resave: false,\n saveUninitialized: false,\n })\n);\napp.use(passport.authenticate('session'));\n...\n" }) }), "\n", _jsxs(_components.h2, { id: "building-authentication-routes", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#building-authentication-routes", children: _jsx(_components.span, { children: "#" }) }), "Building authentication routes"] }), "\n", _jsx(_components.p, { children: "We'll now create specific routes for authentication processes:" }), "\n", _jsxs(_components.h3, { id: "sign-in-sign-in", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sign-in-sign-in", children: _jsx(_components.span, { children: "#" }) }), "Sign in: ", _jsx(_components.code, { children: "/sign-in" })] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "app.get('/sign-in', passport.authenticate('openidconnect'));\n" }) }), "\n", _jsx(_components.p, { children: "This route builds and redirects to an OIDC auth route." }), "\n", _jsxs(_components.h3, { id: "handle-sign-in-callback-callback", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#handle-sign-in-callback-callback", children: _jsx(_components.span, { children: "#" }) }), "Handle sign in callback: ", _jsx(_components.code, { children: "/callback" })] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "app.get(\n '/callback',\n passport.authenticate('openidconnect', {\n successReturnToOrRedirect: '/',\n })\n);\n" }) }), "\n", _jsx(_components.p, { children: "This handles the OIDC sign-in callback, stores tokens, and redirects to the homepage." }), "\n", _jsxs(_components.h3, { id: "sign-out-sign-out", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sign-out-sign-out", children: _jsx(_components.span, { children: "#" }) }), "Sign out: ", _jsx(_components.code, { children: "/sign-out" })] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "app.get('/sign-out', (request, response, next) => {\n request.logout((error) => {\n if (error) {\n next(error);\n return;\n }\n response.redirect(`${endpoint}/oidc/session/end?client_id=${appId}`);\n });\n});\n" }) }), "\n", _jsx(_components.p, { children: "This redirects to Logto's session end URL, then back to the homepage." }), "\n", _jsxs(_components.h2, { id: "fetching-auth-state-and-protect-routes", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#fetching-auth-state-and-protect-routes", children: _jsx(_components.span, { children: "#" }) }), "Fetching auth state and protect routes"] }), "\n", _jsx(_components.p, { children: "Develop the homepage with auth state:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "app.get('/', (request: Request, response) => {\n const { user } = request;\n response.setHeader('content-type', 'text/html');\n\n if (user) {\n response.end(\n `

Hello Logto

Signed in as ${JSON.stringify(\n user\n )}, Sign Out

`\n );\n } else {\n response.end(`

Hello Logto

`);\n }\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Here, user information is displayed using ", _jsx(_components.code, { children: "JSON.stringify" }), ", and the existence of ", _jsx(_components.code, { children: "request.user" }), " is used to protect routes."] }), "\n", _jsxs(_components.h2, { id: "conclusion", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusion", children: _jsx(_components.span, { children: "#" }) }), "Conclusion"] }), "\n", _jsx(_components.p, { children: "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!" }), "\n", _jsx(LogtoCloudButton, { children: "Try Logto today" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }