Auth0 Authentication

• How to Set Up Graphweaver with Auth0
• Prerequisites
• Steps
• Auth0 Configuration
• Initialise a New Graphweaver Project
• Install Dependencies
• Import the SQLite Schema
• Configure Graphweaver
• Set Up Environment Variables
• Integrate Auth0 into the Backend Code
• Start the App
• Conclusion
• Next Steps

How to Set Up Graphweaver with Auth0

This guide will walk you through integrating Auth0 authentication into your Graphweaver project. We'll use Graphweaver's built-in Auth0 support and the Auth0 SPA SDK to handle user logins within the AdminUI.

This guide will also use an Sqlite database as an example data provider. Feel free to follow along or replace with your own data source as needed.

Let’s get started.

Prerequisites

• Node.js and npm/pnpm: Make sure you have Node.js 20 or above along with npm and pnpm (8+) installed on your system.
• Auth0 Account: You'll need an Auth0 account. If you don't have one, sign up for free at https://auth0.com/.
• If you would like to use some dummy data then you can use this sqlite database Embed GitHub

Steps

Auth0 Configuration

There are a number of settings that need to be configured in Auth0 so that it integrates with Graphweaver.

Before we get started with Graphweaver let’s setup Auth0 with the following settings:

• Application Type: Single Page Application
• Allowed Callback Urls: http://localhost:9000, http://localhost:9000/auth/login
• Allowed Logout Urls: http://localhost:9000, http://localhost:9000/auth/login
• Allowed Web Origins: http://localhost:9000

Initialise a New Graphweaver Project

npx graphweaver@latest init

• You'll be prompted to name your project (e.g., auth0).
• For this example choose the "Mikro-orm Sqlite backend". However, if you have a different datasource then use that.
• Confirm the creation of the new Graphweaver app.

Install Dependencies

cd auth0
pnpm add @exogee/graphweaver-auth @exogee/graphweaver-auth-ui-components @exogee/graphweaver-admin-ui-components @auth0/auth0-spa-js

This installs:

• @exogee/graphweaver-auth: Core Graphweaver authentication package used in the backend.
• @exogee/graphweaver-auth-ui-components: Pre-built UI components for login/logout these are used by the AdminUI.
• @exogee/graphweaver-admin-ui-components: The components used by the AdminUI.
• @auth0/auth0-spa-js: Auth0's JavaScript SDK for single-page applications.

Import the SQLite Schema

pnpm run import sqlite

• Provide the database name (e.g., database.sqlite).
• The CLI will then ask you to overwrite the suggested files (backend/schema/index.ts and backend/database.ts). Answer Y to both.

Configure Graphweaver

Next we need to configure the AdminUI to use the Auth0 primary authentication method. To do that we need to create a graphweaver-config.js file:

touch graphweaver-config.js

This creates an empty configuration file for Graphweaver, so add the following code to graphweaver-config.js:

module.exports = {
  adminUI: {
    auth: {
      primaryMethods: ["AUTH_ZERO"], 
    },
  },
};

This tells Graphweaver to use Auth0 ("AUTH_ZERO") as the primary authentication method for the Admin UI.

Set Up Environment Variables

There are a few environment variable that need to be configured and set in an environment file.

Create a .env file:

touch .env

Add the following variables, replacing the placeholders with your actual Auth0 values:

AUTH_BASE_URI="http://localhost:9000" 
AUTH_WHITELIST_DOMAINS="localhost" 
AUTH_JWKS_URI="https://YOUR_AUTH0_DOMAIN/.well-known/jwks.json"
AUTH_JWT_ALGORITHM="RS256" 

VITE_AUTH_ZERO_DOMAIN='YOUR_AUTH0_DOMAIN'
VITE_AUTH_CLIENT_ID='YOUR_AUTH0_CLIENT_ID'

• AUTH_BASE_URI: The base URL of your Graphweaver app (usually http://localhost:9000 during development).
• AUTH_WHITELIST_DOMAINS: Domains allowed to access your app (add your production domain here when deploying).
• AUTH_JWKS_URI: The URL to your Auth0 JSON Web Key Set (used to verify JWTs).
• AUTH_JWT_ALGORITHM: The algorithm used to sign your JWTs (usually RS256).
• VITE_AUTH_ZERO_DOMAIN and VITE_AUTH_CLIENT_ID: Your Auth0 domain and client ID, obtained from your Auth0 application settings.

Integrate Auth0 into the Backend Code

Open src/backend/index.ts in your editor and add the following code:

import {
  UserProfile,
  AuthZero,
  setAddUserToContext,
  setImplicitAllow,
} from "@exogee/graphweaver-auth";

export const authZero = new AuthZero();

export const addUserToContext = async (userId: string) => {
  return new UserProfile({
    id: userId,
    roles: ["everyone"], 
  });
};

setAddUserToContext(addUserToContext); 
setImplicitAllow(true);

Start the App

pnpm start

Your Graphweaver app should now be running with Auth0 authentication!

Conclusion

You now have integrated your Graphweaver instance with Auth0. We have:

• Initialised a new Graphweaver project with SQLite as the database.
• Installed necessary dependencies for Auth0 integration and UI components.
• Imported the SQLite schema to set up the database structure.
• Configured Graphweaver to use Auth0 for authentication in the Admin UI.
• Set up environment variables with our Auth0 credentials.
• Integrated Auth0 into the backend, defining how to handle user profiles and initial permissions.
• Finally, we started the app.

Now you should be able to log in to your Graphweaver Admin UI using Auth0 and start building your application with secure authentication!

Next Steps

• Customise User Profiles: The addUserToContext function is a basic example. You'll likely want to fetch additional user information from Auth0 (e.g., email, name) and store it in your database.
• Permissions and Authorisation: setImplicitAllow(true) is a starting point. You'll need to implement proper authorisation rules to control what different users can do in your app.