Add public registration

.changeset/dry-otters-attend.md

@@ -0,0 +1,8 @@
+---
+'@directus/system-data': patch
+'@directus/api': patch
+'@directus/app': patch
+'@directus/sdk': patch
+---
+
+Added API and UI for public registration

api/src/controllers/users.ts

@@ -501,4 +501,42 @@ router.post(
  respond,
 );
 
+const registerSchema = Joi.object<{ email: string; password: string }>({
+ email: Joi.string().email().required(),
+ password: Joi.string().required(),
+});
+
+router.post(
+ '/register',
+ asyncHandler(async (req, _res, next) => {
+ const { error, value } = registerSchema.validate(req.body);
+ if (error) throw new InvalidPayloadError({ reason: error.message });
+
+ const usersService = new UsersService({ accountability: null, schema: req.schema });
+ await usersService.registerUser(value.email, value.password);
+
+ return next();
+ }),
+ respond,
+);
+
+const verifyRegistrationSchema = Joi.string();
+
+router.get(
+ '/register/verify-email',
+ asyncHandler(async (req, res, _next) => {
+ const { error, value } = verifyRegistrationSchema.validate(req.query['token']);
+
+ if (error) {
+ return res.redirect('/admin/login');
+ }
+
+ const service = new UsersService({ accountability: null, schema: req.schema });
+ const id = await service.verifyRegistration(value);
+
+ return res.redirect(`/admin/users/${id}`);
+ }),
+ respond,
+);
+
 export default router;

api/src/database/migrations/20240422A-public-registration.ts

@@ -0,0 +1,31 @@
+import type { Knex } from 'knex';
+
+// To avoid typos
+const TABLE_ROLES = 'directus_roles';
+const COLUMN_ROLES_ID = `${TABLE_ROLES}.id`;
+const TABLE_SETTINGS = 'directus_settings';
+const NEW_COLUMN_IS_REGISTRATION_ENABLED = 'is_public_registration_enabled';
+const NEW_COLUMN_ROLE = 'public_registration_role';
+const NEW_COLUMN_IS_EMAIL_VALIDATION_ENABLED = 'is_public_registration_email_validation_enabled';
+const NEW_COLUMN_EMAIL_FILTER = 'public_registration_email_filter';
+
+export async function up(knex: Knex): Promise<void> {
+ await knex.schema.alterTable(TABLE_SETTINGS, (table) => {
+ table.boolean(NEW_COLUMN_IS_REGISTRATION_ENABLED).notNullable().defaultTo(false);
+ table.boolean(NEW_COLUMN_IS_EMAIL_VALIDATION_ENABLED).notNullable().defaultTo(true);
+ table.uuid(NEW_COLUMN_ROLE).nullable();
+ table.foreign(NEW_COLUMN_ROLE).references(COLUMN_ROLES_ID).onDelete('SET NULL');
+ table.json(NEW_COLUMN_EMAIL_FILTER).nullable();
+ });
+}
+
+export async function down(knex: Knex): Promise<void> {
+ await knex.schema.alterTable(TABLE_SETTINGS, (table) => {
+ table.dropColumns(
+ NEW_COLUMN_IS_REGISTRATION_ENABLED,
+ NEW_COLUMN_IS_EMAIL_VALIDATION_ENABLED,
+ NEW_COLUMN_ROLE,
+ NEW_COLUMN_EMAIL_FILTER,
+ );
+ });
+}

api/src/services/mail/templates/user-registration.liquid

@@ -0,0 +1,36 @@
+{% layout 'base' %} {% block content %}
+
+<h1>Verify your email address</h1>
+
+<p style='padding-bottom: 30px'>
+ Thanks for registering with us at <i>{{ projectName }}</i>.
+ To complete your registration you need to verify your email address by opening the following verification-link.
+</p>
+
+<a
+ class='button'
+ rel='noopener'
+ target='_blank'
+ href='{{url}}'
+ style='
+ font-size: 16px;
+ font-weight: 600;
+ color: #ffffff;
+ text-decoration: none;
+ display: inline-block;
+ padding: 11px 24px;
+ border-radius: 8px;
+ background: #171717;
+ border: 1px solid #ffffff;
+ '
+>
+ <!--[if mso]>
+ <i style="letter-spacing: 25px; mso-font-width: -100%; mso-text-raise: 30pt"
+ >&nbsp;</i
+ >
+ <![endif]-->
+ <span style='mso-text-raise: 15pt'>Verify email</span>
+ <!--[if mso]> <i style="letter-spacing: 25px; mso-font-width: -100%">&nbsp;</i> <![endif]-->
+</a>
+
+{% endblock %}

api/src/services/server.ts

@@ -54,6 +54,7 @@ export class ServerService {
  'public_favicon',
  'public_note',
  'custom_css',
+ 'is_public_registration_enabled',
  ],
  });
 

api/src/services/users.ts

@@ -1,7 +1,14 @@
 import { useEnv } from '@directus/env';
-import { ForbiddenError, InvalidPayloadError, RecordNotUniqueError, UnprocessableContentError } from '@directus/errors';
-import type { Item, PrimaryKey, Query } from '@directus/types';
-import { getSimpleHash, toArray } from '@directus/utils';
+import {
+ ContainsNullValuesError,
+ ForbiddenError,
+ InvalidPayloadError,
+ RecordNotUniqueError,
+ UnprocessableContentError,
+ isDirectusError,
+} from '@directus/errors';
+import type { Item, PrimaryKey, Query, User } from '@directus/types';
+import { getSimpleHash, toArray, validatePayload } from '@directus/utils';
 import { FailedValidationError, joiValidationErrorItemToErrorExtensions } from '@directus/validation';
 import Joi from 'joi';
 import jwt from 'jsonwebtoken';
@@ -451,6 +458,111 @@ export class UsersService extends ItemsService {
  await service.updateOne(user.id, { password, status: 'active' });
  }
 
+ async registerUser(email: string, password: string) {
+ const STALL_TIME = 750;
+ const timeStart = performance.now();
+ const serviceOptions: AbstractServiceOptions = { accountability: this.accountability, schema: this.schema };
+ const settingsService = new SettingsService(serviceOptions);
+
+ const settings = await settingsService.readSingleton({
+ fields: [
+ 'is_public_registration_enabled',
+ 'is_public_registration_email_validation_enabled',
+ 'public_registration_role',
+ 'public_registration_email_filter',
+ ],
+ });
+
+ if (settings?.['is_public_registration_enabled'] == false) {
+ await stall(STALL_TIME, timeStart);
+ throw new ForbiddenError();
+ }
+
+ const publicRegistrationRole = settings?.['public_registration_role'];
+
+ if (!publicRegistrationRole) {
+ await stall(STALL_TIME, timeStart);
+ throw new ContainsNullValuesError({ collection: 'directus_settings', field: 'public_registration_role' });
+ }
+
+ const hasEmailValidation = settings?.['is_public_registration_email_validation_enabled'];
+
+ const partialUser: Partial<User> = {
+ email,
+ password,
+ role: publicRegistrationRole,
+ status: hasEmailValidation ? 'draft' : 'active', // TODO: Do we want to have a dedicated "unverified" status?
+ };
+
+ const emailFilter = settings?.['public_registration_email_filter'];
+
+ if (hasEmailValidation && emailFilter && validatePayload(emailFilter, { email }).length !== 0) {
+ await stall(STALL_TIME, timeStart);
+ throw new FailedValidationError({ field: 'email', type: 'email' });
+ }
+
+ try {
+ await this.createOne(partialUser);
+ } catch (error: unknown) {
+ // To avoid giving attackers infos about registered emails we dont fail for violated unique constraints
+ if (isDirectusError(error) && error.code === 'RECORD_NOT_UNIQUE') {
+ await stall(STALL_TIME, timeStart);
+ return;
+ }
+
+ await stall(STALL_TIME, timeStart);
+ throw error;
+ }
+
+ if (hasEmailValidation) {
+ const mailService = new MailService(serviceOptions);
+ const payload = { email, scope: 'pending-registration' };
+ const token = jwt.sign(payload, env['SECRET'] as string, { expiresIn: '7d', issuer: 'directus' });
+
+ const verificationURL = new Url(env['PUBLIC_URL'] as string)
+ .addPath('users', 'register', 'verify-email')
+ .setQuery('token', token);
+
+ mailService
+ .send({
+ to: email,
+ subject: 'Verify your email address', // TODO: translate after theres support for internationalized emails
+ template: {
+ name: 'user-registration',
+ data: {
+ url: verificationURL.toString(),
+ email,
+ },
+ },
+ })
+ .catch((error) => {
+ logger.error(error, 'Could not send email verification mail');
+ });
+ }
+
+ await stall(STALL_TIME, timeStart);
+ }
+
+ async verifyRegistration(token: string): Promise<string> {
+ const { email, scope } = verifyJWT(token, env['SECRET'] as string) as {
+ email: string;
+ scope: string;
+ };
+
+ if (scope !== 'pending-registration') throw new ForbiddenError();
+
+ const user = await this.getUserByEmail(email);
+
+ // TODO: might want to have their own status?
+ if (user?.status !== 'draft') {
+ throw new InvalidPayloadError({ reason: `Invalid verification code` });
+ }
+
+ await this.updateOne(user.id, { status: 'active' });
+
+ return user.id;
+ }
+
  async requestPasswordReset(email: string, url: string | null, subject?: string | null): Promise<void> {
  const STALL_TIME = 500;
  const timeStart = performance.now();

app/src/lang/translations/en-US.yaml

@@ -1364,6 +1364,11 @@ fields:
  custom_aspect_ratios: Custom Aspect Ratios
  theme_light_overrides: Light Theme Customization
  theme_dark_overrides: Dark Theme Customization
+ public_registration: Public registration
+ is_public_registration_enabled: Public registration
+ public_registration_role: Role
+ public_registration_email_filter: Email Filter
+ is_public_registration_email_validation_enabled: Send verification email
  directus_shares:
  name: Name
  role: Role
@@ -1631,6 +1636,13 @@ select_field_type: Select a field type
 select_interface: Select an interface
 select_display: Select a display
 settings: Settings
+register: Register
+registration_successful_headline: Success!
+registration_successful_note: |
+ Please note that before you can sign in, you may need to verify your email address by clicking on the verification link sent to you.
+dont_have_an_account: Don't have an account?
+already_have_an_account: Already have an account?
+sign_up_now: Sign up now
 sign_in: Sign In
 sign_out: Sign Out
 sign_out_confirm: Are you sure you want to sign out?

app/src/router.ts

@@ -4,6 +4,7 @@ import AcceptInviteRoute from '@/routes/accept-invite.vue';
 import LoginRoute from '@/routes/login/login.vue';
 import LogoutRoute from '@/routes/logout.vue';
 import PrivateNotFoundRoute from '@/routes/private-not-found.vue';
+import RegisterRoute from '@/routes/register/register.vue';
 import ResetPasswordRoute from '@/routes/reset-password/reset-password.vue';
 import ShareRoute from '@/routes/shared/shared.vue';
 import TFASetup from '@/routes/tfa-setup.vue';
@@ -38,6 +39,14 @@ export const defaultRoutes: RouteRecordRaw[] = [
  public: true,
  },
  },
+ {
+ name: 'register',
+ path: '/register',
+ component: RegisterRoute,
+ meta: {
+ public: true,
+ },
+ },
  {
  name: 'accept-invite',
  path: '/accept-invite',

app/src/routes/login/login.vue

@@ -2,13 +2,13 @@
 import { DEFAULT_AUTH_DRIVER, DEFAULT_AUTH_PROVIDER } from '@/constants';
 import { useServerStore } from '@/stores/server';
 import { useAppStore } from '@directus/stores';
+import { useHead } from '@unhead/vue';
 import { storeToRefs } from 'pinia';
 import { computed, ref, unref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import ContinueAs from './components/continue-as.vue';
 import { LdapForm, LoginForm } from './components/login-form/';
 import SsoLinks from './components/sso-links.vue';
-import { useHead } from '@unhead/vue';
 
 withDefaults(
  defineProps<{
@@ -62,18 +62,25 @@ useHead({
 
  <sso-links v-if="!authenticated" :providers="auth.providers" />
 
+ <div v-if="!authenticated && serverStore.info.project?.is_public_registration_enabled" class="registration-wrapper">
+ {{ t('dont_have_an_account') }}
+ <router-link to="/register" class="registration-link">
+ {{ t('sign_up_now') }}
+ </router-link>
+ </div>
+
  <template #notice>
- <div v-if="authenticated">
+ <template v-if="authenticated">
  <v-icon name="lock_open" left />
  {{ t('authenticated') }}
- </div>
- <div v-else>
- {{
-  logoutReason && te(`logoutReason.${logoutReason}`)
-  ? t(`logoutReason.${logoutReason}`)
-  : t('not_authenticated')
- }}
- </div>
+ </template>
+ <template v-else-if="logoutReason && te(`logoutReason.${logoutReason}`)">
+ {{ t(`logoutReason.${logoutReason}`) }}
+ </template>
+ <template v-else>
+ <v-icon name="lock" left />
+ {{ t('not_authenticated') }}
+ </template>
  </template>
  </public-view>
 </template>
@@ -83,6 +90,21 @@ h1 {
  margin-bottom: 20px;
 }
 
+.registration-wrapper {
+ margin-top: 3rem;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ gap: 0.5rem;
+ text-align: center;
+ color: var(--theme--foreground-subdued);
+}
+
+.registration-link {
+ color: var(--theme--foreground);
+}
+
 .header {
  display: flex;
  align-items: end;