Integration Guide

Auth0 Authentication & CRM Setup

Complete technical guide for implementing authentication and CRM systems with Career Success Institute

Important: Technical Implementation Required

This guide requires intermediate to advanced technical knowledge. You'll need:

  • Basic web development experience (HTML, CSS, JavaScript)
  • Understanding of APIs and webhooks
  • Access to a hosting platform that supports custom code
  • Budget for third-party services ($25-200/month)

If you're not comfortable with technical implementation, consider hiring a developer or using a no-code platform like Bubble.io

1. Architecture Overview

System Components

Marketing Website (Current)

Platform: Landingsite.ai
Domain: careersuccessinstitute.com
Purpose: Public pages, blog, services, payment portal

Stays on Landingsite - no changes needed

Customer Portal (New)

Platform: Bubble.io, Webflow, or Custom
Domain: portal.careersuccessinstitute.com
Authentication: Auth0

Protected area for customers to view documents and track orders

CRM Dashboard (New)

Platform: Airtable, Notion, or Custom
Domain: crm.careersuccessinstitute.com
Authentication: Platform-specific or Auth0

Internal tool for team to manage clients and projects

Database & Backend

Options: Supabase, Firebase, or PostgreSQL
Purpose: Store customer data, orders, documents

Central data storage connected to all systems

Data Flow Diagram

Customer → Landingsite Payment Portal
    ↓
Stripe Payment Processing
    ↓
Webhook → Database (Create Customer Record)
    ↓
Email Service → Send Portal Credentials
    ↓
Customer → portal.careersuccessinstitute.com
    ↓
Auth0 → Login Authentication
    ↓
Customer Portal Dashboard → Display Documents
    ↓
Team → crm.careersuccessinstitute.com
    ↓
CRM Dashboard → Manage Orders & Upload Files
    ↓
Database → Update Customer Records
    ↓
Email Service → Notify Customer of Updates
          

2. Auth0 Setup & Configuration

Step 1: Create Auth0 Account

  1. Go to auth0.com
  2. Click "Sign Up" and create a free account
  3. Choose your region (closest to your customers)
  4. Complete the account setup wizard

Pricing: Free tier includes 7,500 active users - perfect for starting out

Step 2: Create an Application

  1. In Auth0 dashboard, go to Applications → Applications
  2. Click "Create Application"
  3. Name it: Career Success Customer Portal
  4. Select application type: "Single Page Web Applications"
  5. Click "Create"

Step 3: Configure Application Settings

Allowed Callback URLs:

https://portal.careersuccessinstitute.com/callback
http://localhost:3000/callback

Allowed Logout URLs:

https://portal.careersuccessinstitute.com
http://localhost:3000

Allowed Web Origins:

https://portal.careersuccessinstitute.com
http://localhost:3000

Note: Save these settings! You'll need the Domain, Client ID, and Client Secret for integration.

Step 4: Enable Social Connections (Optional)

Allow customers to log in with Google or other social providers:

  1. Go to Authentication → Social
  2. Enable Google (recommended for professional users)
  3. Click the toggle and configure with your Google OAuth credentials
  4. Optionally enable LinkedIn, Microsoft, etc.

Step 5: Configure Multi-Factor Authentication (2FA)

  1. Go to Security → Multi-factor Auth
  2. Enable SMS or One-time Password
  3. Configure Twilio for SMS (optional but recommended)
  4. Set MFA to "Optional" or "Required" based on security needs

Recommendation: Make 2FA optional initially, then encourage users to enable it for added security.

Sample Code: Auth0 Integration

Basic JavaScript integration for customer portal:

// Install Auth0 SDK
// npm install @auth0/auth0-spa-js

import createAuth0Client from '@auth0/auth0-spa-js';

// Initialize Auth0
const auth0 = await createAuth0Client({
  domain: 'your-tenant.us.auth0.com',
  client_id: 'YOUR_CLIENT_ID',
  redirect_uri: 'https://portal.careersuccessinstitute.com/callback'
});

// Login function
async function login() {
  await auth0.loginWithRedirect();
}

// Get user info after login
async function getUserInfo() {
  const user = await auth0.getUser();
  console.log(user);
  return user;
}

// Logout function
async function logout() {
  auth0.logout({
    returnTo: 'https://portal.careersuccessinstitute.com'
  });
}

// Check if user is authenticated
async function isAuthenticated() {
  return await auth0.isAuthenticated();
}

3. Customer Portal Implementation

Limitation: Cannot Build on Landingsite.ai

The customer portal MUST be built on a different platform because Landingsite.ai doesn't support:

  • Custom authentication logic
  • Backend API calls
  • Dynamic user-specific content
  • File upload/storage

Platform Options for Customer Portal:

Option 1: Bubble.io (Recommended)

No-code platform with built-in database and Auth0 plugin

✅ Pros:

  • No coding required
  • Auth0 plugin available
  • Built-in database
  • File upload support
  • Visual editor

❌ Cons:

  • Monthly subscription ($29-$349/mo)
  • Learning curve
  • Less flexibility than custom code

Setup Steps:

  1. Sign up at bubble.io
  2. Create new app: "Career Success Portal"
  3. Install Auth0 plugin from marketplace
  4. Design portal pages with drag-and-drop editor
  5. Connect to Auth0 credentials
  6. Set custom domain: portal.careersuccessinstitute.com

Option 2: Webflow + Memberstack

Designer-friendly with membership plugin

✅ Pros:

  • Beautiful design control
  • Memberstack handles auth
  • Integrates with Zapier/Make
  • Professional output

❌ Cons:

  • Two subscriptions needed
  • Limited database features
  • Requires integrations for complex logic

Cost: Webflow ($29-49/mo) + Memberstack ($25-100/mo) = $54-149/mo

Option 3: Custom Development

Full control with React, Next.js, or Vue.js

✅ Pros:

  • Complete customization
  • Best performance
  • Scalable architecture
  • No platform limitations

❌ Cons:

  • Requires developer ($5k-20k)
  • Longer development time
  • Maintenance needed
  • Hosting costs

Recommended Stack:

  • Frontend: Next.js + React
  • Auth: Auth0 SDK
  • Database: Supabase or Firebase
  • Hosting: Vercel or Netlify
  • Storage: AWS S3 or Cloudinary

4. CRM Platform Options

Option 1: Airtable (Recommended for Simplicity)

Spreadsheet-database hybrid with powerful features

Features:

  • Visual database interface (like advanced Excel)
  • Custom views (Kanban, Calendar, Gallery)
  • Automations built-in
  • File attachments for documents
  • API for connecting to customer portal
  • Forms for customer intake
  • Team collaboration features

Setup Steps:

  1. Sign up at airtable.com
  2. Create base: "Career Success CRM"
  3. Create tables: Customers, Orders, Documents, Team Members
  4. Set up views for different team roles (Admin, Editor, Viewer)
  5. Create automations for email notifications
  6. Generate API key for integration

Pricing: Free tier works for small teams
Plus: $10/user/month
Pro: $20/user/month

Best For: Small to medium businesses, non-technical teams

Option 2: Notion

All-in-one workspace with databases

✅ Pros:

  • Great for documentation + CRM
  • Flexible database structure
  • Team wiki and SOPs
  • Affordable ($8-15/user/month)

❌ Cons:

  • Limited API capabilities
  • Not purpose-built for CRM
  • Slower than specialized tools

Option 3: Full CRM (HubSpot, Salesforce, Pipedrive)

Enterprise-grade CRM platforms

Platforms:

  • HubSpot: Free tier available, best all-around
  • Salesforce: Enterprise-level, complex setup
  • Pipedrive: Sales-focused, affordable
  • Zoho CRM: Budget-friendly option

⚠️ Note: These are designed for sales pipelines, not service delivery tracking. May require customization for your workflow.

Option 4: Custom CRM Dashboard

Build your own with Bubble.io or custom code

Use the CRM dashboard pages you already have on Landingsite as inspiration, then rebuild them on:

  • Bubble.io with database
  • Retool (admin panel builder)
  • Custom React + Supabase

5. Database Setup

Database Schema Overview

Your database needs these main tables:

1. Customers

  • • customer_id
  • • email
  • • name
  • • auth0_user_id
  • • created_at
  • • subscription_status

2. Orders

  • • order_id
  • • customer_id (foreign key)
  • • package_type
  • • price
  • • status
  • • assigned_expert
  • • created_at

3. Documents

  • • document_id
  • • order_id (foreign key)
  • • document_type
  • • file_url
  • • version
  • • status
  • • uploaded_at

4. Team Members

  • • team_member_id
  • • email
  • • role (admin/editor/viewer)
  • • name
  • • active_projects

Recommended: Supabase

Open-source Firebase alternative with PostgreSQL

Why Supabase?

  • PostgreSQL database (industry standard)
  • Built-in auth (can work alongside Auth0)
  • Real-time subscriptions
  • File storage included
  • Generous free tier
  • Auto-generated REST API

Setup:

  1. Sign up at supabase.com
  2. Create new project: "Career Success DB"
  3. Create tables using SQL editor or table builder
  4. Set up Row Level Security (RLS) policies
  5. Get API keys for integration

Alternative: Firebase

Google's backend-as-a-service platform

✅ Pros:

  • Google infrastructure
  • Excellent documentation
  • Real-time database
  • Free tier generous

❌ Cons:

  • NoSQL (less structured)
  • Vendor lock-in
  • Complex queries harder

6. Payment Integration with Stripe

Payment Flow Integration

1

Create Stripe Account

Sign up at stripe.com and complete verification

2

Set Up Products

Create products in Stripe: Resume Package ($299), Cover Letter ($149), etc.

3

Configure Webhooks

Set up webhook to trigger on successful payment

Webhook URL: https://your-backend.com/api/stripe/webhook
Events: checkout.session.completed, payment_intent.succeeded
4

Webhook Handler

Create API endpoint to receive Stripe webhooks

// Webhook handler example
app.post('/api/stripe/webhook', async (req, res) => {
  const sig = req.headers['stripe-signature'];
  const event = stripe.webhooks.constructEvent(req.body, sig, webhookSecret);
  
  if (event.type === 'checkout.session.completed') {
    const session = event.data.object;
    
    // 1. Create customer in database
    await createCustomer({
      email: session.customer_email,
      name: session.customer_details.name,
      orderId: session.id,
      amount: session.amount_total / 100
    });
    
    // 2. Send confirmation email
    await sendEmail({
      to: session.customer_email,
      template: 'payment-confirmation',
      data: { orderId: session.id }
    });
    
    // 3. Redirect to thank you page
    // (handled by Stripe's success_url)
  }
  
  res.json({ received: true });
});

Connecting Payment Portal

Update your Landingsite payment form to redirect to Stripe Checkout:

  1. Create Stripe Checkout Session via API call
  2. Redirect user to Stripe hosted page
  3. Configure success_url to your thank-you page
  4. Webhook creates customer record in database
  5. Email automation sends portal credentials

7. Email Automation Setup

Recommended: SendGrid

Transactional email service

Setup Steps:

  1. Sign up at sendgrid.com
  2. Verify your domain (careersuccessinstitute.com)
  3. Create email templates using your designs from /email-templates
  4. Generate API key
  5. Integrate with your webhook handler

Free Tier: 100 emails/day

Essentials: $19.95/mo (50k emails)

Email Triggers to Set Up

Payment Confirmation

Trigger: Stripe webhook → checkout.session.completed

Portal Credentials

Trigger: Customer record created in database (24hrs after payment)

First Draft Ready

Trigger: Document status changed to "ready_for_review" in database

Revision Acknowledgment

Trigger: Revision requested in customer portal

8. Monthly Cost Breakdown

Recommended Stack Pricing

Auth0

$0

Free (up to 7,500 users)

Bubble.io

$29

Starter plan

Airtable

$20

Plus (2 users)

SendGrid

$20

Essentials plan

Total Monthly Cost

$69/mo

Plus Stripe processing fees (2.9% + 30¢ per transaction)

Budget Option (~$25/mo)

  • Auth0: Free
  • Supabase: Free (includes database + storage)
  • Notion: $8/user
  • SendGrid: Free (100 emails/day)
  • Vercel: Free hosting

Requires more technical setup

Premium Option (~$200/mo)

  • Auth0: $23 (Essentials)
  • Bubble.io: $115 (Performance)
  • HubSpot: $45 (Starter CRM)
  • SendGrid: $20 (Essentials)

Better scalability and support

Next Steps to Get Started

  1. 1

    Choose Your Stack: Decide between no-code (Bubble + Airtable) or custom development

  2. 2

    Set Up Auth0: Create account and configure authentication

  3. 3

    Build Customer Portal: Create portal subdomain with login functionality

  4. 4

    Set Up CRM: Configure Airtable or other CRM for team use

  5. 5

    Connect Payments: Integrate Stripe with webhook automation

  6. 6

    Automate Emails: Set up SendGrid with email templates

  7. 7

    Test End-to-End: Run through complete customer journey before launch

Need Help?

Consider hiring a developer on Upwork or Fiverr ($500-2000 for initial setup) or use a no-code specialist if you choose the Bubble.io route.

Career Success Institute - Technical Integration Guide

For questions, contact: [email protected]

Last Updated: January 2025 | Version 1.0