Securing access between services is a critical issue for enterprises, because it involves managing access to multiple integrated applications and services that need to communicate and share data with each other to perform their functions. For organizations that rely on multiple integrated applications and services to provide complete solutions, such as web applications that communicate with databases, APIs, and more, secure access management is crucial. Mismanaged access can lead to severe issues like data breaches, service disruptions, inefficient operation, and even compliance violations.

With our newest integration (beta) with Auth0 by Okta, developers can benefit from a streamlined and secure solution for managing access across multiple services, which can be valuable for enterprises and organizations with complex application and service architectures involving multiple teams and departments. The integration enables Netlify users to automatically link their sites to Applications and APIs on Okta, and add authorization to Netlify Functions using the withAuth0 method to build SaaS applications on Netlify.

Using Auth0 in your frontend application

Information below is just a slice of the integration. For detailed guidance on setting up your Auth0 application, a tenant, and a Netlify site to configure with an Auth0 app, please refer to our docs page.

Here’s an example using the Auth0 SDK for React Single Page Applications, which provides a wrapper for your application. In this example, the prefix VITE_ is used for the environment variables.

You might recall that when you established your connection, you added your Auth0 client ID and domain. Prefixed with the build system of your choice, this created the AUTH0_CLIENT_ID and AUTH0_DOMAIN environment variables. You created the AUTH0_AUDIENCE environment variable when you configured your tenant. Pass those environment variables as parameters to the Auth0Provider function:

import { Auth0Provider } from "@auth0/auth0-react";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
{% raw %}
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <Auth0Provider
      clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
      domain={import.meta.env.VITE_AUTH0_DOMAIN}
      authorizationParams={{
        redirect_uri: window.location.origin,
        audience: import.meta.env.VITE_AUTH0_AUDIENCE,
        scope: "openid profile admin",
      }}
    >
      <App />
    </Auth0Provider>
  </React.StrictMode>
);
{% endraw %}

Create a function to use Auth0 on the backend

You can use the Auth0 by Okta Integration to add authorization to a serverless function in your project.

To get started, install the necessary packages:

npm install @netlify/auth0 @netlify/integrations

The example uses withAuth0 alongside another integration, withPlanetscale, which enables a database call to get users. This method requires the PlanetScale Integration, so install the following package as well:

npm install @netlify/planetscale

In the example below, the withAuth0 hook is passed into the wrap method that wraps the handler function. The required parameter is set to true, ensuring authentication is required. By default, this parameter is set to false.

The roles property is an optional configuration to use RBAC. For this use case, a user must authenticate and possess the admin role in order to access the users pulled from the database. You need to configure permissions for roles in your Auth0 dashboard.

import { Handler } from "@netlify/functions";
import { wrap } from "@netlify/integrations";
import { withPlanetscale } from "@netlify/planetscale";
import { withAuth0 } from "@netlify/auth0";
const withIntegrations = wrap(withAuth0, withPlanetscale);
export const handler: Handler = withIntegrations(
  async (event, context) => {
    const { connection } = context.planetscale;
    const { rows: users } = await connection.execute("SELECT * FROM  users");
    return {
      statusCode: 200,
      body: JSON.stringify(users),
    };
  },
  {
    auth0: {
      required: true,
      roles: ["admin"],
    },
  }
);

If you have any questions or feedback about this integration, feel free to post in our forums!