// THINKLAB · Auth + Permissions (frontend-only via Google Sign-In)
// Setup: replace TLAB_GOOGLE_CLIENT_ID below with your Google OAuth Client ID
// Get one at: https://console.cloud.google.com/apis/credentials
const TLAB_GOOGLE_CLIENT_ID = window.TLAB_GOOGLE_CLIENT_ID || '__REPLACE_ME__.apps.googleusercontent.com';
// Email allowlist — only these emails can read private articles
// Edit this list to grant access. Wildcard pattern *@domain.com supported.
window.TLAB_ALLOWLIST = window.TLAB_ALLOWLIST || [
'max770104@gmail.com',
'tzuyiarch@gmail.com',
// Add more emails or domains here, e.g. '*@thinklab.studio'
];
// Decode a JWT (does NOT verify signature — frontend-only trust model)
function decodeJWT(token) {
try {
const parts = token.split('.');
if (parts.length !== 3) return null;
const payload = JSON.parse(atob(parts[1].replace(/-/g, '+').replace(/_/g, '/')));
return payload;
} catch (e) {
return null;
}
}
// Check if email matches the allowlist (supports *@domain.com wildcards)
function isEmailAllowed(email) {
if (!email) return false;
const list = window.TLAB_ALLOWLIST || [];
return list.some(rule => {
if (rule.startsWith('*@')) {
return email.toLowerCase().endsWith(rule.slice(1).toLowerCase());
}
return rule.toLowerCase() === email.toLowerCase();
});
}
// Auth state hook — provides { user, signIn, signOut, isAllowed }
function useAuth() {
const { useState, useEffect } = React;
const [user, setUser] = useState(() => {
try {
const cached = localStorage.getItem('tlab_auth');
if (!cached) return null;
const parsed = JSON.parse(cached);
// Check expiry (Google JWTs have 'exp' in seconds since epoch)
if (parsed.exp && parsed.exp * 1000 < Date.now()) {
localStorage.removeItem('tlab_auth');
return null;
}
return parsed;
} catch (e) {
return null;
}
});
const signIn = (token) => {
const payload = decodeJWT(token);
if (!payload || !payload.email) return false;
const u = {
email: payload.email,
name: payload.name || payload.email,
picture: payload.picture || null,
exp: payload.exp,
};
localStorage.setItem('tlab_auth', JSON.stringify(u));
setUser(u);
return true;
};
const signOut = () => {
localStorage.removeItem('tlab_auth');
setUser(null);
if (window.google?.accounts?.id?.disableAutoSelect) {
window.google.accounts.id.disableAutoSelect();
}
};
return {
user,
signIn,
signOut,
isAllowed: user ? isEmailAllowed(user.email) : false,
};
}
// Google Sign-In button — initialises GSI when mounted
function GoogleSignInButton({ onSuccess }) {
const { useEffect, useRef } = React;
const ref = useRef(null);
useEffect(() => {
const init = () => {
if (!window.google?.accounts?.id) {
setTimeout(init, 200);
return;
}
try {
window.google.accounts.id.initialize({
client_id: TLAB_GOOGLE_CLIENT_ID,
callback: (resp) => {
if (resp.credential) onSuccess(resp.credential);
},
auto_select: false,
});
if (ref.current) {
window.google.accounts.id.renderButton(ref.current, {
theme: 'outline',
size: 'large',
type: 'standard',
text: 'signin_with',
shape: 'rectangular',
logo_alignment: 'left',
width: 280,
});
}
} catch (e) {
console.error('GSI init failed:', e);
}
};
init();
}, [onSuccess]);
if (TLAB_GOOGLE_CLIENT_ID.startsWith('__REPLACE_ME__')) {
return (
⚙ Setup required
Set TLAB_GOOGLE_CLIENT_ID in auth.jsx with your Google OAuth Client ID. Get one here →
);
}
return ;
}
// Login gate — shown when user tries to view a private article
function LoginGate({ articleTitle }) {
const { user, signIn, isAllowed, signOut } = useAuth();
if (user && isAllowed) {
// Should not reach here normally; parent should have unlocked
return null;
}
return (
🔒 § PRIVATE RESEARCH
Authentication required
此研究內容受權限保護
{articleTitle ? <>To read {articleTitle}, please sign in. : 'To read this article, please sign in.'} 請登入以閱讀此研究內容。
{!user ? (
signIn(token)} />
) : (
Signed in as {user.email} This account does not have access to private research.
)}
Access requests · LK@tlabarc.com
);
}
// Compact auth status badge for the topbar (optional)
function AuthBadge() {
const { user, signOut, isAllowed } = useAuth();
if (!user) return null;
return (
{isAllowed ? '🔓' : '🔒'} {user.email.split('@')[0].slice(0, 12)}
);
}
Object.assign(window, { useAuth, GoogleSignInButton, LoginGate, AuthBadge, isEmailAllowed });