Add public registration #22125

DanielBiegler · 2024-04-08T19:05:42Z

Scope

What's changed:

New UI so you can go to register
It adds a new user with a specified role
Fixed a UI bug on the login page
DB migration that adds fields to directus_settings
Hide register button depending on directus_settings
Email validation via customizable filter
Add mailing service to send out the verification code
Email template for the verification email

Register Route	After Success

Fixed UI inconsistency in login & reset-password

Before	After
Screencast.from.2024-04-08.20-49-44.webm	Screencast.from.2024-04-08.20-57-14.webm

Potential Risks / Drawbacks

todo

Review Notes / Questions

Dont forget to run the migration 😉

Fixes #21981

changeset-bot · 2024-04-08T19:05:46Z

🦋 Changeset detected

Latest commit: d69c13d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 21 packages

Name	Type
@directus/system-data	Patch
@directus/api	Patch
@directus/app	Patch
@directus/sdk	Patch
@directus/utils	Patch
directus	Patch
@directus/composables	Patch
@directus/env	Patch
@directus/extensions-registry	Patch
@directus/extensions-sdk	Patch
@directus/extensions	Patch
@directus/memory	Patch
@directus/pressure	Patch
@directus/storage-driver-azure	Patch
@directus/storage-driver-cloudinary	Patch
@directus/storage-driver-gcs	Patch
@directus/storage-driver-s3	Patch
@directus/storage-driver-supabase	Patch
@directus/themes	Patch
@directus/validation	Patch
create-directus-extension	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

…stration

DanielBiegler · 2024-04-30T15:23:24Z

api/src/services/users.ts

+ email,
+ password,
+ role: publicRegistrationRole,
+ status: hasEmailValidation ? 'draft' : 'active', // TODO: Do we want to have a dedicated "unverified" status?


I'm thinking about renaming the invited-status to a more generic pending-status so that we can use the same status for invited and registered-but-not-yet-verified users but simply using the migration file to rename the status could lead to breaking existing logic in users projects for example somebody might have Flows that expect the users to be invited

Another approach could be to just replace the Invited UI label to Pending and keep the underlying invited string the same to stay backwards compatible.

Mhh. Could also just add a new status to be both precise and backwards compatible. Like so:

If we add the new status we can give it a more concrete name too like Unverified for example

I would have to take a closer look, but I think a dedicated (hidden) field for the email verification status could make sense. This could also be used, for example, if the user is already active and changes the email address, which would have to be verified again (but the user status should stay "active").

…stration

DanielBiegler · 2024-04-30T15:33:23Z

app/src/routes/register/register.vue

+
+ <register-form v-else :provider="provider" @was-successful="wasSuccessful = $event" />
+
+ <sso-links v-if="!authenticated && wasSuccessful == false" :providers="auth.providers" />


actually, do we want to show sso links on the register page? 🤔

I don't think so, as those fall under the action of "login", right? So a better fit for the login page

as those fall under the action of "login", right

Not necessarily if you have public registration enabled for SSO it doubles as both login and registration 🤔
I wouldnt be against having the SSO buttons on the registration page if configured as such but feels like someone with more UX insight may have more opinions there.

Agreed, removing them now

Not necessarily if you have public registration enabled for SSO it doubles as both login and registration 🤔

Yeah, but you actually login to the provider with an existing account there (at least in most cases)

DanielBiegler · 2024-04-30T15:43:01Z

api/src/controllers/users.ts

+const registerSchema = Joi.object<{ email: string; password: string }>({
+ email: Joi.string().email().required(),
+ password: Joi.string().required(),
+});
+
+router.post(
+ '/register',


It'd be nice if we would add a way to specify more user fields because I can see people using this service to build their own login pages with more fields 🤔

Allowing other user fields would need to be sanitized though we cant let them override role for example

You mean like require a phone number or similar? 🤔

Yes for example a number or even simpler first & last name. Avatar could also be useful, stuff like that. It'd be nice to also allow populating user-provided fields for when users have manually extended the directus_users table so it'd have to be dynamic but I'm a little hesitant there because of security concerns. Mhh

Interesting ❤️ Well, actually it would "just" be another (public/shared) form where we could use existing validation logic, etc. 🤔 Of course would need some proxying of the corresponding fields.

paescuj · 2024-04-30T16:01:01Z

sdk/src/rest/commands/server/info.ts

@@ -5,6 +5,7 @@ export type ServerInfoOutput = {
 project: {
 project_name: string;
 default_language: string;
+ is_public_registration_enabled: boolean; // TODO Get opinion from @Brainslug


This should be sufficient IMO, the type already indicates that it's a toggle state:

Suggested change

is_public_registration_enabled: boolean; // TODO Get opinion from @Brainslug

public_registration: boolean;

E.g. comparable to bool states in Collection metadata:

directus/packages/system-data/src/types.ts

Lines 26 to 33 in d10385d

hidden: boolean;

singleton: boolean;

icon: string | null;

color: string | null;

translations: CollectionTranslations[] | null;

display_template: string | null;

preview_url: string | null;

versioning: boolean;

paescuj · 2024-04-30T16:06:24Z

api/src/services/users.ts

+ email,
+ password,
+ role: publicRegistrationRole,
+ status: hasEmailValidation ? 'draft' : 'active', // TODO: Do we want to have a dedicated "unverified" status?


I would have to take a closer look, but I think a dedicated (hidden) field for the email verification status could make sense. This could also be used, for example, if the user is already active and changes the email address, which would have to be verified again (but the user status should stay "active").

paescuj · 2024-04-30T16:07:32Z

api/src/controllers/users.ts

+const registerSchema = Joi.object<{ email: string; password: string }>({
+ email: Joi.string().email().required(),
+ password: Joi.string().required(),
+});
+
+router.post(
+ '/register',


You mean like require a phone number or similar? 🤔

hanneskuettner · 2024-05-02T15:07:19Z

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

+ public_registration: Public registration
+ is_public_registration_enabled: Public registration


These should probably both be title case

Suggested change

public_registration: Public registration

is_public_registration_enabled: Public registration

public_registration: Public Registration

is_public_registration_enabled: Public Registration

hanneskuettner · 2024-05-02T15:35:29Z

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

+ 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


Rename to public_registration_send_verification_email? Also, title case.

hanneskuettner · 2024-05-02T15:38:10Z

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

+ public_registration: Public registration
+ is_public_registration_enabled: Public registration
+ public_registration_role: Role
+ public_registration_email_filter: Email Filter


Probably make it a bit clearer that it is a filter for the email address and does not have anything to do with the "Send verification email".

Suggested change

public_registration_email_filter: Email Filter

public_registration_email_filter: Email Address Filter

hanneskuettner · 2024-05-02T15:41:25Z

packages/system-data/src/fields/settings.yaml

+ display_options:
+ template: '{{ name }}'
+
+ - field: is_public_registration_email_validation_enabled


Personally I'd swap the "Send Verification Email" and "Email Filter" field order, since the email filter is related more closely to the user, vs the verification email toggle.

hanneskuettner · 2024-05-02T15:53:30Z

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

+ 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


Title Case :)

hanneskuettner · 2024-05-02T15:55:11Z

app/src/routes/register/register-form.vue

+ password.value === null ||
+ passwordsMatch.value === false
+ ) {
+ error.value = 'INVALID_PAYLOAD';


Let's use ErrorCode.InvalidPayload here?

hanneskuettner · 2024-05-02T15:58:30Z

api/src/services/users.ts

+ 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') {


Could be simplified to isDirectusError(error, ErrorCode.RecordNotUnique)

hanneskuettner · 2024-05-02T15:59:53Z

api/src/services/users.ts

+ if (hasEmailValidation) {
+ const mailService = new MailService(serviceOptions);
+ const payload = { email: input.email, scope: 'pending-registration' };
+ const token = jwt.sign(payload, env['SECRET'] as string, { expiresIn: '7d', issuer: 'directus' });


Should the expiresIn here and in the user invite be moved to a common constant?

WIP: add new register dummy-route

45eefff

DanielBiegler added 🍰 Improvement 🍰 Feature 📁 Authentication labels Apr 8, 2024

DanielBiegler added 25 commits April 9, 2024 13:03

fix notice on register route

de3b6c7

WIP register form

7cb09e2

WIP: registering ui and controller for testing

3ca7722

fix lint ordering problem

d8f1e20

wip: users service

5d0861e

add migration, initial style for fields in settings

3c1099d

redo how emails will be filtered

be9bdbe

WIP add filter in the register handler

266d114

conditionally render register link depending on settings

38bbd9b

Merge remote-tracking branch 'origin/main' into fix-21981-public-regi…

c4a9575

…stration

WIP: add email validation

950a8ac

wip add email sending

4e54498

make clicking the email link work

130cc9c

rm console log

2a3ef64

update controller

d7167d4

dont send emails for existing emails

f9ebb9e

add translation

6c2e6e2

only show register link when unauthenticated

c9c19f6

add different redirects

9eee9ea

only allow selecting non-admin roles

316bd7c

redirect to users page

17e41e6

update translation

afcf208

move logic from controller to usersservice

2f7c628

rm remnant of logic from controller

2e6f166

add stall time to registration

c9291b1

DanielBiegler added 3 commits April 30, 2024 16:54

update translation

f2e327d

rm comments

45ab86b

rm unused var

4eb6a7d

DanielBiegler commented Apr 30, 2024

View reviewed changes

Merge remote-tracking branch 'origin/main' into fix-21981-public-regi…

60403ba

…stration

DanielBiegler commented Apr 30, 2024

View reviewed changes

add changeset

3e7fb98

DanielBiegler commented Apr 30, 2024

View reviewed changes

update translation for success

92c8280

DanielBiegler requested review from hanneskuettner and br41nslug April 30, 2024 15:57

DanielBiegler marked this pull request as ready for review April 30, 2024 15:57

DanielBiegler marked this pull request as draft April 30, 2024 16:02

paescuj reviewed Apr 30, 2024

View reviewed changes

remove sso related stuff from registration

421cc56

DanielBiegler marked this pull request as ready for review April 30, 2024 16:10

DanielBiegler changed the title ~~WIP: Add public registration~~ Add public registration Apr 30, 2024

also allow setting first and last name

d69c13d

hanneskuettner reviewed May 2, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add public registration #22125

Add public registration #22125

DanielBiegler commented Apr 8, 2024 •

edited

changeset-bot bot commented Apr 8, 2024 •

edited

DanielBiegler Apr 30, 2024

paescuj Apr 30, 2024

DanielBiegler Apr 30, 2024

paescuj Apr 30, 2024

br41nslug Apr 30, 2024

DanielBiegler Apr 30, 2024

paescuj Apr 30, 2024

DanielBiegler Apr 30, 2024

paescuj Apr 30, 2024

DanielBiegler Apr 30, 2024

paescuj Apr 30, 2024 •

edited

paescuj Apr 30, 2024 •

edited

paescuj Apr 30, 2024

paescuj Apr 30, 2024

hanneskuettner May 2, 2024

hanneskuettner May 2, 2024

hanneskuettner May 2, 2024

hanneskuettner May 2, 2024

hanneskuettner May 2, 2024

hanneskuettner May 2, 2024

hanneskuettner May 2, 2024

hanneskuettner May 2, 2024


		<register-form v-else :provider="provider" @was-successful="wasSuccessful = $event" />

		<sso-links v-if="!authenticated && wasSuccessful == false" :providers="auth.providers" />

	is_public_registration_enabled: boolean; // TODO Get opinion from @Brainslug
	public_registration: boolean;

	hidden: boolean;
	singleton: boolean;
	icon: string \| null;
	color: string \| null;
	translations: CollectionTranslations[] \| null;
	display_template: string \| null;
	preview_url: string \| null;
	versioning: boolean;

		public_registration: Public registration
		is_public_registration_enabled: Public registration

	public_registration_email_filter: Email Filter
	public_registration_email_filter: Email Address Filter

Add public registration #22125

Are you sure you want to change the base?

Add public registration #22125

Conversation

DanielBiegler commented Apr 8, 2024 • edited

Scope

Potential Risks / Drawbacks

Review Notes / Questions

changeset-bot bot commented Apr 8, 2024 • edited

🦋 Changeset detected

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

paescuj Apr 30, 2024 • edited

Choose a reason for hiding this comment

paescuj Apr 30, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DanielBiegler commented Apr 8, 2024 •

edited

changeset-bot bot commented Apr 8, 2024 •

edited

paescuj Apr 30, 2024 •

edited

paescuj Apr 30, 2024 •

edited