Skip to main content

Integrate authentication into React

This guide shows how to create a simple React application and secure it with authentication powered by Ory. The guide provides the setup for using Ory Network, but the code can be used with both Ory Network and self-hosted Ory software.

This guide is perfect for you if:

  1. You have React installed.
  2. You want to build an app using React.
  3. 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 React app​

First we create a new React project:

npx create-react-app my_project --template typescript
cd my_project

Install Ory SDK and CLI​

To interact with Ory's APIs we install the Ory SDK and CLI:

npm i --save @ory/client @ory/cli

Why do I need the Ory CLI​

The Ory security model uses HTTP cookies to manage sessions, tokens, and cookies. Because of browser security measures like CORS, Ory APIs must be exposed on the same domain as your application.

In the case of this example the application runs on your local machine. The cookie domain is localhost.

info

When developing locally, use either localhost or 127.0.0.1, but not both. Although technically these mean the same thing, they're different cookie domains.

Using both interchangeably in your code causes problems, as Ory APIs will not receive the cookies when they are set on a different domain.

Ory CLI provides a convenient way to configure and manage projects. Additionally, the CLI provides Ory Tunnel - a reverse proxy that rewrites cookies to match the domain your application is currently on.

To make Ory APIs and your application available on the same domain, Ory Tunnel mirrors Ory endpoints and rewrites cookies to match the domain correct domain.

As a result, the domain of the cookies is set correctly to the domain you run the app on instead of <your-project-slug>.projects.oryapis.com.

By using the Tunnel, you can easily connect the application you're developing locally to Ory Network and consume the APIs without additional configuration or the self-hosting any Ory services.

tip

To learn more about the Ory Tunnel, read the dedicated section of the Ory CLI documentation.

Require login to access the app page​

Next we add a session check to the default home page of the React example application.The highlighted code is what we added to check whether the user is signed in, get the logout url flow and redirect them to the login page if not. There is also a welcome message with the registered user email and a logout link:

import React, { useEffect, useState } from "react"
import logo from "./logo.svg"
import "./App.css"

import { FrontendApi, Configuration, Session, Identity } from "@ory/client"

// Get your Ory url from .env
// Or localhost for local development
const basePath = process.env.REACT_APP_ORY_URL || "http://localhost:4000"
const ory = new FrontendApi(
  new Configuration({
    basePath,
    baseOptions: {
      withCredentials: true,
    },
  }),
)

function App() {
  const [session, setSession] = useState<Session | undefined>()
  const [logoutUrl, setLogoutUrl] = useState<string | undefined>()

  // Returns either the email or the username depending on the user's Identity Schema
  const getUserName = (identity?: Identity) =>
    identity?.traits.email || identity?.traits.username


  // Second, gather session data, if the user is not logged in, redirect to login
  useEffect(() => {
    ory
      .toSession()
      .then(({ data }) => {
        // User has a session!
        setSession(data)
        ory.createBrowserLogoutFlow().then(({ data }) => {
          // Get also the logout url
          setLogoutUrl(data.logout_url)
        })
      })
      .catch((err) => {
        console.error(err)
        // Redirect to login page
        window.location.replace(`${basePath}/ui/login`)
      })
  }, [])

  if (!session) {
    // Still loading
    return <h1>Loading...</h1>
  }

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Welcome to Ory,{" "}
          {
            getUserName(session?.identity)
          }
          .
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        {
          // Our logout link
          <a href={logoutUrl}>Logout</a>
        }
      </header>
    </div>
  )
}

export default App

Run Ory APIs on localhost​

The Ory security model uses HTTP cookies to manage sessions, tokens, and cookies. To do that, Ory APIs must be exposed on the same domain as your application.

In the case of this example, the domain of your application, which runs on your local machine, is localhost.

info

When developing locally, use either localhost or 127.0.0.1, but not both. Although technically these mean the same thing, they're different hostnames.

Using both interchangeably in your code can cause problems with the origin of HTTP cookies sent by the application. When that happens Ory APIs might not be able to read the cookies sent by your app.

To get your application that runs locally and Ory APIs on the same domain, use Ory Tunnel - a development tool bundled with Ory CLI. It's like a microservice - an authentication API server on your domain!

To get your project's SDK URL, go to Project settings → Overview in the Ory Console, and copy the URL from the API Endpoints field.

export ORY_SDK_URL=https://$PROJECT_SLUG.projects.oryapis.com

In a new terminal window, start the Ory Tunnel. Upon first start, the Ory Tunnel will ask you to log into your Ory Console account.

npx @ory/cli tunnel --dev http://localhost:3000

Ory APIs are now mirrored on http://localhost:4000. Use that URL as the baseUrl for the @ory/client SDK (see code above). The --dev flag disables security checks for easier integration and should not be used when deploying the Tunnel to a staging environment.

Run your React app​

Great, that's it. Let's run your application. Set up your environment variables to connect with Ory's APIs

# This is a public Ory Network Project.
# Don’t submit any personally identifiable information in requests made with this project.
# Sign up to Ory Network at
#
#   https://console.ory.sh/registration
#
# and create a free Ory Network Project to see your own configuration embedded in code samples.
export ORY_SDK_URL=https://$PROJECT_SLUG.projects.oryapis.com

and start the React development server:

npm start

Then open http://localhost:3000 in your browser. After loading, you now are presented with Ory's Sign In page! Let's click on sign up and create your first user.

Go to production​

To promote this app to production:

  1. Build the React app and run it somewhere (for example on Vercel or Netlify)
  2. Deploy the API (for example, on Heroku)
  3. Connect your project with a custom domain

These three components must be hosted on the same top-level domain as they were on your local machine:

ComponentProductionLocal
Single Page Appwww.example.orglocalhost:3000
Oryory.example.orglocalhost:4000
Ory Network

The most flexible and scalable way to manage identi­ties, authen­tication, autho­rization and access control.Explore Ory Network

Explore Ory Network