AUSTENITE - API510 Backend

Good Evening, Tushar Koradia

Here's what's happening with your API510 account today

☁️

Supabase Status

Checking...

Loading library...

📊

Database

Not Connected

Configure below

👥

Total Users

0

Registered users

✅

Active Sections

0

Visible to users

📚

Total Sections

0

Exam categories

❓

Total Questions

0

Question bank

Quick Actions

Manage your exam platform

User Management

Manage user accounts and subscriptions

Total Users

0

All registered users

Active

0

Paid subscriptions

Trial

0

Free trial users

Users

NAME	EMAIL	APP NAME	REGISTER DATE	SUBSCRIPTION START	SUBSCRIPTION END	STATUS	ACTIONS
No users found

Notifications

Send system-wide notifications to all users

Send New Notification

Notification Message

Sent By

Notification History

MESSAGE	SENT BY	SENT AT	ACTIONS
No notifications found

Sections

Manage exam sections and categories

Sections

	SEQUENCE	SECTION NAME	SECID	DESCRIPTION	OPENBOOK TIME	CLOSEDBOOK TIME	ISEXAM	ISACTIVE	ACTIONS
No sections found

Questions Management

Add and manage exam questions

Questions List

Section: Tag: Show: records

	SECID	SECTAG	QTAG	QUESTION	OPTA	OPTB	OPTC	OPTD	ANS	SOLUTION	ISOPEN	ISCLOSE	FILE	ACTION
No questions found

Reported Questions

Review and manage user-reported question issues

Question Reports

Loading reports...

Settings

Configure your Supabase backend connection and authentication

Supabase Configuration

Supabase URL Example: http://192.168.1.100:8000 (use port 8000, not 54321)

Supabase Anon Key Find this in Supabase Studio → Settings → API → anon public key

Connection Status

Library Status: Checking...

Database Status: Not Connected

Supabase URL: Not Set

💡

First Time Setup Guide

Make sure Supabase is running: docker ps
Get your server IP address
Open Supabase Studio: http://YOUR_IP:54321
Go to Settings → API → Copy "anon public" key
Enter URL as: http://YOUR_IP:8000 (port 8000)
Paste the anon key
Click "Save Configuration" then "Test Connection"

🔐 Authentication Testing

Test user account operations: Create Account, Login, OTP Verification, and Password Reset

⚠️ Database Setup Required

For user registration to work, ensure your api510_users table has:

An id column of type UUID that matches the auth user ID
An email_confirmed column of type BOOLEAN (default false) to track email verification

RLS should be disabled for testing. The signup function will automatically create records in both Supabase Auth and your database.

📎 File Attachment Setup (510_files Storage Bucket)

To enable PDF/file attachments on questions, complete these two steps:
The image_url column already exists in your api510_questions table — no SQL changes needed.

Ensure the Storage bucket is ready in Supabase Studio:

Go to Storage in Supabase Studio
Confirm the 510_files bucket exists
Make sure it is set to Public so files can be accessed via URL

Create User Account

ℹ️ How it works:

This creates the user in both places:
1. Supabase Auth (auth.users) - for authentication
2. Your database (api510_users) - for app data

Email Address

Password

Full Name (Optional)

Test User Login

Email Address

Password

OTP Verification

Email Address

OTP Code

Password Reset

Email Address

Update Password (After Reset Link)

New Password

✉️ OTP Email Customization

Customize the email content sent to users for both OTP verification and account activation. This unified template will be used for all authentication emails.

Email Subject This subject will be used for all verification emails

Email Greeting The user's name will be automatically added if available

Welcome Message Initial welcome message shown to all users

Verification Instructions Instructions shown before the OTP code and activation link

🔢 OTP Code Section

Include OTP Code in Email When enabled, a 6-digit OTP code will be displayed in the email

OTP Section Title

OTP Instructions

🔗 Activation Link Section

Include Activation Link in Email When enabled, a clickable activation button/link will be displayed

Activation Section Title

Activation Button Text

Activation Link Instructions

Additional Options

Security Notice

Include Account Benefits Section

Account Benefits (one per line)

Include Support Contact Information

Support Email

Email Footer

Current Session

No active session

📱 Frontend Integration Guide

Complete guide and code snippets for integrating authentication into your frontend application

1. Initial Setup

Install Supabase Client

Add Supabase to your project:

npm install @supabase/supabase-js

Or use CDN (for vanilla HTML/JS):

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>

Initialize Supabase Client

Create a Supabase client instance in your app:

import { createClient } from '@supabase/supabase-js'

// Replace with your Supabase URL and Anon Key
const supabaseUrl = 'http://YOUR_IP:8000'
const supabaseAnonKey = 'YOUR_ANON_KEY'

const supabase = createClient(supabaseUrl, supabaseAnonKey)

// Export for use in other files
export default supabase

⚠️ Important Configuration

Get your credentials from Supabase Studio:

Open Supabase Studio at http://YOUR_IP:54321
Go to Settings → API
Copy the URL (use port 8000, not 54321)
Copy the anon public key

2. Create Account (Sign Up)

ℹ️ What this does:

Creates a user in Supabase Auth and automatically adds them to your api510_users table with default values.

Complete Sign Up Function

async function signUp(email, password, fullName) {
    try {
        // Step 1: Create auth user
        const { data: authData, error: authError } = await supabase.auth.signUp({
            email: email,
            password: password,
            options: {
                data: {
                    full_name: fullName
                }
            }
        })

        if (authError) throw authError

        // Step 2: Add user to database
        const { data: dbData, error: dbError } = await supabase
            .from('api510_users')
            .insert([{
                id: authData.user.id,  // Match auth user ID
                name: fullName || email.split('@')[0],
                email: email,
                app_name: 'API 510 Helpmate',
                email_confirmed: false,
                status: 'Trial',
                register_date: new Date().toISOString().split('T')[0]
            }])
            .select()

        if (dbError) throw dbError

        console.log('✅ User created successfully!', authData.user)
        alert('Account created! Please check your email for verification.')
        
        return { success: true, user: authData.user }
        
    } catch (error) {
        console.error('❌ Sign up error:', error.message)
        alert('Error: ' + error.message)
        return { success: false, error: error.message }
    }
}

// Usage Example:
// signUp('[email protected]', 'password123', 'John Doe')

HTML Form Example

<form id="signup-form">
    <input type="text" id="fullname" placeholder="Full Name" required>
    <input type="email" id="email" placeholder="Email" required>
    <input type="password" id="password" placeholder="Password (min 6 chars)" required>
    <button type="submit">Create Account</button>
</form>

<script>
document.getElementById('signup-form').addEventListener('submit', async (e) => {
    e.preventDefault()
    const name = document.getElementById('fullname').value
    const email = document.getElementById('email').value
    const password = document.getElementById('password').value
    
    await signUp(email, password, name)
})
</script>

3. User Login

ℹ️ What this does:

Authenticates user with email and password, creates a session, and retrieves user data.

Complete Login Function

async function login(email, password) {
    try {
        const { data, error } = await supabase.auth.signInWithPassword({
            email: email,
            password: password
        })

        if (error) throw error

        // Get user data from database
        const { data: userData, error: userError } = await supabase
            .from('api510_users')
            .select('*')
            .eq('email', email)
            .single()

        if (userError) throw userError

        console.log('✅ Login successful!', data.user)
        console.log('📊 User data:', userData)
        
        // Store user data in localStorage for easy access
        localStorage.setItem('user', JSON.stringify(userData))
        localStorage.setItem('session', JSON.stringify(data.session))
        
        alert('Login successful! Welcome back.')
        
        // Redirect to dashboard or home page
        // window.location.href = '/dashboard.html'
        
        return { success: true, user: data.user, userData: userData }
        
    } catch (error) {
        console.error('❌ Login error:', error.message)
        alert('Login failed: ' + error.message)
        return { success: false, error: error.message }
    }
}

// Usage Example:
// login('[email protected]', 'password123')

Logout Function

async function logout() {
    try {
        const { error } = await supabase.auth.signOut()
        
        if (error) throw error
        
        // Clear local storage
        localStorage.removeItem('user')
        localStorage.removeItem('session')
        
        console.log('✅ Logged out successfully')
        alert('Logged out successfully')
        
        // Redirect to login page
        // window.location.href = '/login.html'
        
        return { success: true }
        
    } catch (error) {
        console.error('❌ Logout error:', error.message)
        return { success: false, error: error.message }
    }
}

HTML Form Example

<form id="login-form">
    <input type="email" id="login-email" placeholder="Email" required>
    <input type="password" id="login-password" placeholder="Password" required>
    <button type="submit">Login</button>
</form>

<script>
document.getElementById('login-form').addEventListener('submit', async (e) => {
    e.preventDefault()
    const email = document.getElementById('login-email').value
    const password = document.getElementById('login-password').value
    
    await login(email, password)
})
</script>

4. OTP Verification

ℹ️ What this does:

Verifies the OTP code sent to user's email and updates the email_confirmed status.

Verify OTP Function

async function verifyOTP(email, otpCode) {
    try {
        const { data, error } = await supabase.auth.verifyOtp({
            email: email,
            token: otpCode,
            type: 'email'
        })

        if (error) throw error

        // Update email_confirmed in database
        const { error: updateError } = await supabase
            .from('api510_users')
            .update({ email_confirmed: true })
            .eq('email', email)

        if (updateError) throw updateError

        console.log('✅ Email verified successfully!', data)
        alert('Email verified! You can now log in.')
        
        return { success: true, session: data.session }
        
    } catch (error) {
        console.error('❌ OTP verification error:', error.message)
        alert('Verification failed: ' + error.message)
        return { success: false, error: error.message }
    }
}

// Usage Example:
// verifyOTP('[email protected]', '123456')

Resend OTP Function

async function resendOTP(email) {
    try {
        const { error } = await supabase.auth.resend({
            type: 'signup',
            email: email
        })

        if (error) throw error

        console.log('✅ OTP resent successfully')
        alert('New verification code sent to your email!')
        
        return { success: true }
        
    } catch (error) {
        console.error('❌ Resend OTP error:', error.message)
        alert('Failed to resend code: ' + error.message)
        return { success: false, error: error.message }
    }
}

// Usage Example:
// resendOTP('[email protected]')

HTML Form Example

<form id="otp-form">
    <input type="email" id="otp-email" placeholder="Email" required>
    <input type="text" id="otp-code" placeholder="6-digit code" maxlength="6" required>
    <button type="submit">Verify</button>
    <button type="button" onclick="resendOTP(document.getElementById('otp-email').value)">
        Resend Code
    </button>
</form>

<script>
document.getElementById('otp-form').addEventListener('submit', async (e) => {
    e.preventDefault()
    const email = document.getElementById('otp-email').value
    const code = document.getElementById('otp-code').value
    
    await verifyOTP(email, code)
})
</script>

5. Password Reset

ℹ️ How it works:

Step 1: User requests password reset (sends reset link to email)
Step 2: User clicks link in email (redirects to your reset page)
Step 3: User enters new password on reset page

Request Password Reset

async function requestPasswordReset(email) {
    try {
        const { error } = await supabase.auth.resetPasswordForEmail(email, {
            redirectTo: 'http://yourapp.com/reset-password.html'
        })

        if (error) throw error

        console.log('✅ Password reset email sent')
        alert('Password reset link sent! Check your email.')
        
        return { success: true }
        
    } catch (error) {
        console.error('❌ Reset request error:', error.message)
        alert('Failed to send reset link: ' + error.message)
        return { success: false, error: error.message }
    }
}

// Usage Example:
// requestPasswordReset('[email protected]')

Update Password (on reset page)

async function updatePassword(newPassword) {
    try {
        const { data, error } = await supabase.auth.updateUser({
            password: newPassword
        })

        if (error) throw error

        console.log('✅ Password updated successfully')
        alert('Password updated! You can now log in with your new password.')
        
        // Redirect to login page
        // window.location.href = '/login.html'
        
        return { success: true }
        
    } catch (error) {
        console.error('❌ Update password error:', error.message)
        alert('Failed to update password: ' + error.message)
        return { success: false, error: error.message }
    }
}

// Usage Example:
// updatePassword('newPassword123')

HTML Forms Example

<!-- Request Reset Form -->
<form id="request-reset-form">
    <input type="email" id="reset-email" placeholder="Email" required>
    <button type="submit">Send Reset Link</button>
</form>

<!-- Reset Password Form (on reset-password.html page) -->
<form id="update-password-form">
    <input type="password" id="new-password" placeholder="New Password" required>
    <input type="password" id="confirm-password" placeholder="Confirm Password" required>
    <button type="submit">Update Password</button>
</form>

<script>
// Request reset
document.getElementById('request-reset-form').addEventListener('submit', async (e) => {
    e.preventDefault()
    const email = document.getElementById('reset-email').value
    await requestPasswordReset(email)
})

// Update password
document.getElementById('update-password-form').addEventListener('submit', async (e) => {
    e.preventDefault()
    const newPass = document.getElementById('new-password').value
    const confirmPass = document.getElementById('confirm-password').value
    
    if (newPass !== confirmPass) {
        alert('Passwords do not match!')
        return
    }
    
    await updatePassword(newPass)
})
</script>

6. Session Management

Check Current Session

async function getCurrentSession() {
    const { data: { session }, error } = await supabase.auth.getSession()
    
    if (error) {
        console.error('Session error:', error)
        return null
    }
    
    if (session) {
        console.log('✅ Active session:', session.user.email)
        return session
    } else {
        console.log('❌ No active session')
        return null
    }
}

// Usage Example:
// const session = await getCurrentSession()

Get Current User

async function getCurrentUser() {
    const { data: { user }, error } = await supabase.auth.getUser()
    
    if (error) {
        console.error('Get user error:', error)
        return null
    }
    
    if (user) {
        // Get additional user data from database
        const { data: userData } = await supabase
            .from('api510_users')
            .select('*')
            .eq('id', user.id)
            .single()
        
        return { authUser: user, dbUser: userData }
    }
    
    return null
}

// Usage Example:
// const currentUser = await getCurrentUser()
// console.log(currentUser.dbUser.name)

Protected Route Example

// Check authentication on page load
async function checkAuth() {
    const session = await getCurrentSession()
    
    if (!session) {
        // Not logged in - redirect to login page
        alert('Please log in to access this page')
        window.location.href = '/login.html'
        return false
    }
    
    // User is authenticated
    const user = await getCurrentUser()
    console.log('Authenticated user:', user.dbUser.name)
    
    // Display user info on page
    document.getElementById('user-name').textContent = user.dbUser.name
    
    return true
}

// Call on protected pages
window.addEventListener('DOMContentLoaded', () => {
    checkAuth()
})

Listen to Auth State Changes

// Set up auth state listener
supabase.auth.onAuthStateChange((event, session) => {
    console.log('Auth event:', event)
    
    if (event === 'SIGNED_IN') {
        console.log('✅ User signed in:', session.user.email)
        // Update UI, redirect, etc.
    }
    
    if (event === 'SIGNED_OUT') {
        console.log('❌ User signed out')
        // Clear UI, redirect to login, etc.
        window.location.href = '/login.html'
    }
    
    if (event === 'TOKEN_REFRESHED') {
        console.log('🔄 Token refreshed')
    }
    
    if (event === 'PASSWORD_RECOVERY') {
        console.log('🔑 Password recovery')
    }
})

// This listener will automatically handle session refresh

✅ Quick Reference

Common Supabase Auth Methods:

supabase.auth.signUp() - Create new account
supabase.auth.signInWithPassword() - Login with email/password
supabase.auth.signOut() - Logout current user
supabase.auth.verifyOtp() - Verify OTP code
supabase.auth.resend() - Resend verification email
supabase.auth.resetPasswordForEmail() - Request password reset
supabase.auth.updateUser() - Update user password/data
supabase.auth.getSession() - Get current session
supabase.auth.getUser() - Get current user
supabase.auth.onAuthStateChange() - Listen to auth events

🔐 Admin Panel

Create User Account

Test User Login

OTP Verification

Password Reset

Update Password (After Reset Link)

✉️ OTP Email Customization

🔢 OTP Code Section

🔗 Activation Link Section

Additional Options

Email Preview

Current Session

1. Initial Setup

Install Supabase Client

Initialize Supabase Client

2. Create Account (Sign Up)

Complete Sign Up Function

HTML Form Example

3. User Login

Complete Login Function

Logout Function

HTML Form Example

4. OTP Verification

Verify OTP Function

Resend OTP Function

HTML Form Example

5. Password Reset

Request Password Reset

Update Password (on reset page)

HTML Forms Example

6. Session Management

Check Current Session

Get Current User

Protected Route Example

Listen to Auth State Changes

✅ Quick Reference

Edit Question

View Full Question

📝 Admin Notes

Add User

Add Section