PRD – Authentication & Onboarding
What do we want to achieve?
We want to give people a secure and friendly way to create an account, log in, and get
started with the website. This will include-
1. New users should be able to sign up quickly and easily (using email, password, or a social
login button like Google or Apple)
2.When they come back later, they should be able to sign in without complexity and feel
confident their data is safe.
3.Right after sign-up, users should go through a simple onboarding process, a guided
series of steps to help them set up their profile, learn the basics of the product, and feel
welcomed.
4. In the backend, the system should quietly ensure security (protecting accounts, managing
tokens, handling verification)
Why?
1. Retention: Every extra field, confusing error message, or slow email reduces the percent
of visitors who become accounts. Friction in sign-up reduces new-user conversion; a simple
and trusted flow increases sign-ups.
2.Trust & Security: Authentication needs to protect user data and business assets and
reduce fraud.
3. Smooth onboarding: profile completion, guided steps and progressive disclosure.
Key metrics to track:
● Conversion rate: visitors → registered users.
● Time-to-first-successful-login.
● Onboarding completion rate (profile fields completed).
● Auth error rates (failed logins / email bounce / social-provider errors).
● Security metrics: number of blocked brute-force attempts, MFA adoption rate.
● Support tickets related to auth.
What will we build (feature list)?
1. Sign up / sign in: email & password.
2. Social login: Google, Apple, Facebook
3. Passwordless: magic link (email)
4. Email verification during signup.
5. Guest/anonymous usage with optional upgrade path.
6. Password reset (secure, expiring tokens).
Possible approaches and respective workflows-
Option A- Managed / Integrated (Firebase Authentication + Firebase Cloud Functions)
Simple workflow
1. Angular calls Firebase Auth (SDK) to sign up or social sign-in.
2. Firebase issues ID tokens.
3. Cloud Functions validate ID tokens, set httpOnly refresh cookie if needed, and
access Firestore/SQL for profile.
4. Cloud Functions send verification / welcome emails (via SendGrid or the same
provider)
Pros: Extremely fast to implement; tight Angular SDK support (AngularFire); secure defaults
(email verification, token handling); built-in social & passwordless.
Cons: Vendor lock-in (Firebase/GCP), cost grows with scale, less flexibility for unusual
enterprise SSO needs
Option B- Third-party Identity Provider (Auth0/Okta) + Cloud Functions
Simple workflow
1. Angular redirects to Auth0/Okta for login (or uses SDK popup).
2. Provider returns tokens to Angular; Cloud Functions use provider introspection for
validation.
3. Onboarding profile stored in app DB; webhooks notify Cloud Functions.
Pros: Enterprise-ready (SSO, SAML/OIDC, advanced policies), many features out of the
box.
Cons: Costly for scale; external dependency; integration complexity for custom onboarding.
Option C - Cloud Provider Native (AWS Cognito + Lambda / Azure AD B2C)
Simple workflow
1. Angular integrates with Cognito/Azure B2C for auth flows.
2. Tokens validated in Cloud Functions (or Lambdas).
3. Use provider for user pools, triggers call cloud functions for custom logic.
Pros / Cons
● Pros: Good if infra is already in the same cloud (AWS/Azure), integrated security and
scaling.
● Cons: Cognitive overhead; configuration complexity; possible UX friction compared to
Firebase.
Option D -Passwordless (Magic links) as primary or optional method
Simple workflow
1. The user enters an email.
2. Cloud Function sends a one-time, single-use link with an expiring token.
3. Click = logged in and redirected to onboarding.
Pros: Lowest friction, fewer passwords to manage.
Cons: Email deliverability issues, phishing risk, less suitable for shared inboxes.
Recommended approach-
Start with Option A: Firebase Authentication + Firebase Cloud Functions +
AngularFire for the initial build because it balances speed, security, Angular fit, and product
velocity.
Workflow-
1. Sign-up (minimal)
a. The user enters email + password OR chooses social sign-in / magic link.
b. Firebase creates a user and sends verification email.
c. Angular shows a short “verify your email” screen with a resend button.
2. First app open (post-verify)
a. If newly verified, redirect to progressive onboarding step 1 (display name,
avatar optional).
b. Cloud Function creates a profile document (userID → profile) when a user is
created or first login.
3. Progressive onboarding
a. Step 1: required minimal data (name, role).
b. Step 2: optional preferences & notification opt-ins.
c. Step 3: short guided tutorial (in-app).
4. Session & token handling
a. After login, set an httpOnly, Secure SameSite cookie with refresh token;
expose a short-lived access token in memory for API calls.
b. Use Cloud Function (post/refresh) to rotate refresh token and return new
access token; rotate and revoke old refresh token on logout.
User flows-
Flow A - Email sign-up & onboarding
1. User clicks Sign up → enters email & password.
2. App shows “Check your email to verify” + button to resend.
3. After verification, they are automatically redirected to Onboarding step1
4. Complete minimal profile → click Continue → optional preferences → finish.
5. The app shows a quick tour and gets the user to their first “success” action (upload
first item / create first record).
Flow B - Social sign-in
1. User clicks “Continue with Google/Apple”.
2. Consent screen from provider → provider returns token → app creates/links profile
→ show onboarding if new.
Flow C - Magic link
1. Enter email → receive link → click link in email → land in app as signed in → short
onboarding.
Flow D - Returning user with expired access token
1. App attempts to call API → gets 401/expired → calls /refresh endpoint.
2. If refresh OK → new access token used → original call retried transparently.
3. If refresh fails (revoked/expired) → redirect to login
WEB SEQUENCE DIAGRAM
User→Angularize: Click "Sign up" (email+pw)
Angularize→Cloud Functions: POST /signup {email,password}
Cloud Functions→Identity provider: createUser(email,password)
Identity provider→ Cloud functions: userId, tokens
Cloud Functions→EMail service: endVerificationEmail(userId)
Cloud functions→app database: createProfilePlaceholder(userId)
Cloud Functions→Angularize: 201 Created (ask user to verify)
User → email service: Click verification link
Email service→ cloud functions: GET /verify?token
Cloud Functions→ Identity Provider: verifyToken
Identity provider → Cloud functions: verified
Cloud Functions→Angularize: redirect to /onboarding
Angularize→Cloud Functions: POST /profile {profile data} (uses ID token)
Cloud functions→app database: save profile
Cloud functions→Angularize: 200 OK (onboarding complete)
