🔐 Authentication
Secure user login with one line of code. No passwords to manage, verified users only.
Overview
Gammal Tech Authentication uses the Gammal Tech Passport system — a unified digital identity that users create once and use across all integrated applications. When users log in through your app, they authenticate with Gammal Tech and you receive a secure token.
Users verify their identity once (email + WhatsApp OTP + real ID). You get verified users without managing passwords, and users get a seamless single sign-on experience across all Gammal Tech-powered apps.
Quick Start
Add the SDK and implement login in under 5 minutes:
<!-- 1. Add the SDK -->
<script src="https://api.gammal.tech/sdk-web.js"></script>
<!-- 2. Add a login button -->
<button id="loginBtn">Login with Gammal Tech</button>
<div id="userInfo"></div>
<script>
// 3. Handle login
document.getElementById('loginBtn').addEventListener('click', async () => {
const token = await GammalTech.login();
if (token) {
console.log('Logged in! Token:', token);
// User is now authenticated
}
});
// 4. Check auth state on page load
if (GammalTech.isLoggedIn()) {
console.log('User is already logged in');
}
</script>No API keys, no OAuth configuration, no password storage. The SDK handles everything including token storage in sessionStorage.
Method Reference
Opens the Gammal Tech login popup. Returns the authentication token on success, or null if the user cancels or an error occurs.
// Basic usage
const token = await GammalTech.login();
// With error handling
try {
const token = await GammalTech.login();
if (token) {
// Success - user is logged in
showDashboard();
} else {
// User cancelled or popup blocked
showLoginPrompt();
}
} catch (error) {
console.error('Login failed:', error);
}Logs out the current user by clearing the stored token from sessionStorage.
// Logout and redirect
document.getElementById('logoutBtn').addEventListener('click', () => {
GammalTech.logout();
window.location.href = '/goodbye.html';
});Returns true if a valid token exists in sessionStorage, false otherwise. Use this to check auth state on page load.
// Protect a page
if (!GammalTech.isLoggedIn()) {
window.location.href = '/login.html';
}
// Toggle UI based on auth state
if (GammalTech.isLoggedIn()) {
document.getElementById('loginBtn').style.display = 'none';
document.getElementById('dashboard').style.display = 'block';
}Returns the stored authentication token, or null if not logged in. Use this when you need to pass the token to other SDK methods or your backend.
// Get token for API calls
const token = GammalTech.getToken();
// Use with AI chat (requires token)
const response = await GammalTech.ai.chat(token, 'Hello!');Registers callbacks for authentication state changes. Perfect for reactive UI updates.
| Parameter | Type | Description |
|---|---|---|
onLoggedIn |
function(token) |
Called when user logs in, receives the token |
onLoggedOut |
function() |
Called when user logs out |
// Set up auth state listeners
GammalTech.onAuth(
(token) => {
// User logged in
console.log('Welcome! Token:', token);
showUserDashboard();
},
() => {
// User logged out
console.log('Goodbye!');
showLoginPage();
}
);Verifies the current token with the Gammal Tech server and returns user information. Use this to validate tokens and get basic user data.
// Verify token and get user info
const result = await GammalTech.verify();
if (result.success) {
console.log('User verified:', result.user);
// result.user contains: { id, name, email, ... }
} else {
console.log('Invalid token');
GammalTech.logout();
}Token Storage
The SDK automatically stores the authentication token in sessionStorage under the key gammaltech_token. This means:
Token persists across page navigations within the same tab. User must re-login when opening a new browser tab or after closing the browser. This is intentional for security.
If you need the token to persist longer (e.g., for mobile WebView apps), you can manually store it:
// Store token in localStorage for persistence
const token = await GammalTech.login();
if (token) {
localStorage.setItem('my_app_token', token);
}
// Restore token on page load
const savedToken = localStorage.getItem('my_app_token');
if (savedToken) {
sessionStorage.setItem('gammaltech_token', savedToken);
// Now GammalTech.isLoggedIn() will return true
}Security Model
Gammal Tech authentication uses domain whitelisting instead of API keys:
You register your domains at my.gammal.tech. The SDK only works on those domains. No API keys means nothing to leak, and attackers can't use your integration from their domains.
Setup Steps
1. Go to my.gammal.tech and create a developer account
2. Add your domains (e.g., myapp.com, dev.myapp.com, localhost:3000)
3. Set your callback URL for authentication redirects
4. Start using the SDK — no keys required!
Common Patterns
Protected Pages
// At the top of protected pages
<script src="https://api.gammal.tech/sdk-web.js"></script>
<script>
if (!GammalTech.isLoggedIn()) {
// Redirect to login, remember where to return
sessionStorage.setItem('returnTo', window.location.href);
window.location.href = '/login.html';
}
</script>Login with Return URL
// On login page
async function handleLogin() {
const token = await GammalTech.login();
if (token) {
const returnTo = sessionStorage.getItem('returnTo') || '/dashboard.html';
sessionStorage.removeItem('returnTo');
window.location.href = returnTo;
}
}Dynamic UI Updates
// HTML structure
<div id="guest-content">
<button onclick="GammalTech.login()">Login</button>
</div>
<div id="user-content" style="display:none">
<span id="userName"></span>
<button onclick="handleLogout()">Logout</button>
</div>
<script>
// Update UI based on auth state
GammalTech.onAuth(
async (token) => {
const result = await GammalTech.verify();
document.getElementById('userName').textContent = result.user.name;
document.getElementById('guest-content').style.display = 'none';
document.getElementById('user-content').style.display = 'block';
},
() => {
document.getElementById('guest-content').style.display = 'block';
document.getElementById('user-content').style.display = 'none';
}
);
</script>Related Documentation
AI Prompt for Vibe Coding
AuthenticationCopy this prompt into ChatGPT or Claude for help implementing authentication: