Webpage Integration: Sign Up

[henryajisegiri]

Goal

Wire up the sign up form to the backend, implement backend validation, and send a confirmation email on successful account creation.

Figma

---

Scope

Full-stack: form validation, account creation, confirmation email template, and OAuth redirects.

---

Acceptance Criteria

Form fields

• Email Address (required)
• Password (required)
• Re-enter Password (required)
• Username (required)

Backend validation

Backend validation is triggered only on form submission (i.e. clicking "Create Account").

• Email already in use: If the submitted email address is already registered, return an error and display an inline message below the email field: "An account with this email already exists."
• Password not commonly used: If the submitted password appears in a common passwords list, return an error and display an inline message below the password field: "This password is too common. Please choose a different one."

Account creation

• On successful validation, a new user account is created.
• A confirmation email is sent to the provided email address.

Confirmation email

Email copy
Subject: Confirmation Email
Body: Hello from www.boost.org!

You're receiving this email because user {{email_address}} has given your email address to register an account on www.boost.org.

To confirm this is correct, go to {{confirmation_link}}

Thank you for using www.boost.org!
www.boost.org

Email Template Design

OAuth

• "Continue with GitHub" initiates the GitHub OAuth flow.
• "Continue with Google" initiates the Google OAuth flow.
• On successful OAuth, the user is created or logged in and redirected to the homepage.

Mailing list subscription modal

• Upon successful email confirmation (both direct sign up and OAuth), the mailing list subscription modal is triggered.
• The modal is only triggered on first-time account creation, not on subsequent logins.
• For direct sign up, the modal is triggered after email confirmation.
• For OAuth, the modal is triggered immediately after the first successful authentication, since email verification is handled by the OAuth provider.

Sign in redirect

• "Already have an account? Sign in →" routes to the login page.

---

FE/BE Actions

Description	URL
Submit registration form
GitHub OAuth
Google OAuth

---

Out of Scope

Frontend validation

Frontend validation runs inline as the user types and blocks submission if any rule is unmet.

Password rules:

• At least 9 characters

• Does not contain the user's email address

• Does not contain the username

• Can't be entirely numeric
  Re-enter Password:

• Must match the Password field.