payload-auth0-plugin

payload-auth0-plugin

Extends payloadcms with Auth0 integration

Current status

Install

yarn add payload-auth0-plugin

Get Started

server.ts

import { auth } from "express-openid-connect";
const config = {
  authRequired: false,
  idpLogout: true,
  auth0Logout: true,
  baseURL: process.env.REACT_APP_SERVER_BASE_URL,
  clientID: process.env.AUTH0_CLIENT_ID,
  clientSecret: process.env.AUTH0_CLIENT_SECRET,
  issuerBaseURL: process.env.AUTH0_DOMAIN,
  secret: "<LONG_RANDOM_STRING>",
  routes: {
    login: process.env.REACT_APP_AUTH0_LOGIN_URL,
    logout: process.env.REACT_APP_AUTH0_LOGOUT_URL,
    callback: process.env.AUTH0_CALLBACK_URL,
  },
};
app.use(auth(config));

REACT_APP env variables

REACT_APP_SERVER_BASE_URL=http://localhost:3000
REACT_APP_AUTH0_LOGIN_URL=/auth0/login # the one you set up in Auth0
REACT_APP_AUTH0_LOGOUT_URL=/auth0/logout # the one you set up in Auth0
AUTH0_CALLBACK_URL=/auth0/callback # the one you set up in Auth0

payload.config.ts

import Auth0Avatar from from "payload-auth0-plugin/dist/components/Auth0Avatar";
import { LoginButton } from "payload-auth0-plugin/dist/components";

export default buildConfig({
    ....
    admin: {
        avatar: Auth0Avatar,
        logoutRoute: process.env.REACT_APP_AUTH0_LOGOUT_URL,
        inactivityRoute: process.env.REACT_APP_INACTIVITY_URL,
        components: {
            afterLogin: [LoginButton()],
        },
    }
})

your-auth-collection.ts

import { Auth0Strategy } from "payload-auth0-plugin";
import { PictureField } from "payload-auth0-plugin/dist/components";

const MyAuthCollection: CollectionConfig = {
  slug: "authCollection",
  auth: {
    strategies: [
      {
        name: Auth0Strategy.name,
        strategy: (ctx) => {
          return new Auth0Strategy(ctx, "authCollection");
        },
      },
    ],
  },
  fields: [
    {
      name: "picture",
      type: "text",
      admin: {
        hidden: true,
        condition: (data) => {
          return data.picture;
        },
      },
    },
    {
      name: "pictureVisual",
      type: "ui",
      admin: {
        position: "sidebar",
        condition: (_, siblingData) => {
          return siblingData.picture;
        },
        components: {
          Field: PictureField,
          Cell: PictureField,
        },
      },
    },
    {
      name: "sub",
      type: "text",
      admin: {
        readOnly: true,
        condition: (data) => {
          return data.sub;
        },
      },
    },
  ],
};