Protect a Page with Login in NodeJS / ExpressJS
This guide shows how to create a simple ExpressJS application and secure access to the app with Ory. You can use this guide with both Ory Cloud and self-hosted Ory software.
This guide is perfect for you if:
- You have ExpressJS installed.
- You want to build an app using ExpressJS.
- You want to give access to your application to signed-in users only.
Before you start, watch this video to see the user flow you're going to implement:
info
You can find the code of the sample application here.
Create ExpressJS App
First we create a new ExpressJS project:
mkdir your-project
cd your-project
npx express-generator
npm i
Install Ory SDK
To interact with Ory's APIs we install the Ory SDK:
npm i --save @ory/client
Install Ory CLI
The last step is setting up the Ory CLI.
npm i --save @ory/cli
Why do I Need the Ory CLI?
Ory CLI provides a convenient way to configure and manage Ory Cloud projects. Additionally, the CLI contains Ory Proxy - a reverse proxy that rewrites cookies to match the domain your application is currently on.
Ory Proxy is a reverse proxy deployed in front of your application. The Proxy mirrors Ory endpoints on the same domain as the application you're running and rewrites cookies to match the domain your application is currently on.
As a result, the origin of the cookies is set correctly to the domain you run the app on instead of
<your-project-slug>.projects.oryapis.com
This behavior is necessary to avoid issues with the browser CORS policy.
By using the Proxy, you can easily connect the application you're developing locally to Ory Cloud and consume the APIs without the hassle of additional configuration and without the need to self-host any of the Ory Components.
tip
To learn more about the Ory Proxy, read the dedicated section of the Ory CLI documentation.
Add NPM Run Script
Now that the Ory CLI is installed, let's add it as a npm run
script to our project:
{
"name": "protect-page-login",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www",
"proxy": "ory proxy --no-jwt --port 4000 http://localhost:3000/"
},
"dependencies": {
This requires the express app (npm run start
) to run on port 3000. The browser / user uses however the port 4000
(http://localhost:4000) to access the app.
Require Login to Access the Home Page
Next we add a session check to the default home page of the example application. The highlighted code is what we added to check whether the user is signed in, and redirect them to the login page if not:
var express = require("express")
var router = express.Router()
var sdk = require("@ory/client")
var ory = new sdk.V0alpha2Api(
new sdk.Configuration({
baseUrl: "/.ory",
}),
)
/* GET home page. */
router.get("/", function (req, res, next) {
ory
.toSession(undefined, req.header("cookie"))
.then(({ data: session }) => {
res.render("index", {
title: "Express",
// Our identity is stored in the session along with other useful information.
identity: session.identity,
})
})
.catch(() => {
// If logged out, send to login page
res.redirect("/.ory/ui/login")
})
})
module.exports = router
Run your ExpressJS App
Great, that's it! Let's run your application! Start the ExpressJS server
npm run start
and set up your environment variables to connect with Ory's APIs
- macOS
- Linux
- Windows CMD
- Windows Powershell
- Self-Hosted Ory Kratos
# This is a public Ory Cloud Project.
# Don’t submit any personally identifiable information in requests made with this project.
# Sign up for Ory Cloud at
#
# https://console.ory.sh/registration
#
# and create a free Ory Cloud Project to see your own configuration embedded in code samples!
export ORY_SDK_URL=https://{your-project-slug-here}.projects.oryapis.com
# This is a public Ory Cloud Project.
# Don’t submit any personally identifiable information in requests made with this project.
# Sign up for Ory Cloud at
#
# https://console.ory.sh/registration
#
# and create a free Ory Cloud Project to see your own configuration embedded in code samples!
export ORY_SDK_URL=https://{your-project-slug-here}.projects.oryapis.com
# This is a public Ory Cloud Project.
# Don’t submit any personally identifiable information in requests made with this project.
# Sign up for Ory Cloud at
#
# https://console.ory.sh/registration
#
# and create a free Ory Cloud Project to see your own configuration embedded in code samples!
set ORY_SDK_URL=https://{your-project-slug-here}.projects.oryapis.com
# This is a public Ory Cloud Project.
# Don’t submit any personally identifiable information in requests made with this project.
# Sign up for Ory Cloud at
#
# https://console.ory.sh/registration
#
# and create a free Ory Cloud Project to see your own configuration embedded in code samples!
$Env:ORY_SDK_URL = "https://{your-project-slug-here}.projects.oryapis.com"
Clone and run Ory Kratos locally
git clone --depth 1 --branch master https://github.com/ory/kratos.git
cd kratos
git checkout master
git pull -ff
docker-compose -f quickstart.yml -f contrib/quickstart/kratos/cloud/quickstart.yml up --build --force-recreate -d
and set the environment variable to the exposed port:
export ORY_SDK_URL=http://localhost:4433
Next open a new terminal window and start the Ory Proxy:
npm run proxy
To access the ExpressJS app through the ORY proxy open http://localhost:4000 in your browser. You are presented with Ory's Sign In page! Let's click on sign up and create your first user!
Go to Production
Going to production with your app is possible in many ways. Whether you deploy it on Kubernetes, AWS, a VM, or a RaspberryPi is up
to you. To get your app working with Ory, your app and Ory must be available under the same common domain (e.g.
https://ory.example.com
and https://www.example.com
).
The easiest way to connect Ory to your domain is to connect Ory to a subdomain of yours. You can do this easily by adding a Custom Domain to your Cloud project!
With the custom domain set up, you do not need the Ory Proxy anymore and will use the configured custom domain in your SDK calls:
var sdk = require("@ory/client")
var ory = new sdk.V0alpha2Api(
new sdk.Configuration({
baseUrl: "https://ory.example.org",
baseOptions: {
// Ensures that cookies are included in CORS requests:
withCredentials: true,
},
}),
)