Guide 3.20: Real Projects

Add User Authentication

Saving exam history to localStorage is fine for a personal project, but if the user clears their browser cache or switches devices, their data is lost. For a real SaaS product, you need a backend authentication system.

Choosing an Auth Provider

3.20.1

Because SdashAPI is a headless API purely for educational data, it does not manage your app's users. You must pair SdashAPI with a backend database. Popular choices include:

  • Firebase Authentication (Easiest for Vanilla JS)
  • Supabase (Great PostgreSQL alternative)
  • Clerk (Excellent for React/Next.js)
  • Custom PHP/MySQL (If you are building your own backend)

Securing Your SdashAPI Key

3.20.2

Throughout this tutorial, we hardcoded const API_KEY = 'YOUR_ACCESS_TOKEN' in app.js. DO NOT DO THIS IN PRODUCTION! Anyone can view your JavaScript source code, steal your token, and drain your SdashAPI credits.

Instead, your Vanilla JS frontend should make a request to your own backend. Your backend then securely attaches your SdashAPI key and forwards the request to SdashAPI. We cover this extensively in our Framework guides (Level 4).

Want to add gamification?

Next, we will discuss how to implement Global Leaderboards to increase engagement.

Next Guide: Leaderboards →
Avatar

How can we help?

We reply immediately

Hello! 👋 How can we help you today?