🤖 Auto-backup: 2026-01-27 19:34:55
This commit is contained in:
Your Name
4
.git-auto-commit.sh
Executable file
4
.git-auto-commit.sh
Executable file
@@ -0,0 +1,4 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
MESSAGE="${1:-Auto-commit: $(date +%Y-%m-%d\ %H:%M:%S)}"
|
||||||
|
git add -A && git commit -m "$MESSAGE" && git push 2>/dev/null || echo "⚠ Check remote"
|
||||||
|
echo "✅ Done!"
|
||||||
92
clerk-integration/README.md
Normal file
92
clerk-integration/README.md
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
# Clerk Authentication Integration for blackroad-keycloak
|
||||||
|
|
||||||
|
## Setup Instructions
|
||||||
|
|
||||||
|
### 1. Get Clerk API Keys
|
||||||
|
|
||||||
|
1. Sign up at [clerk.com](https://clerk.com)
|
||||||
|
2. Create a new application
|
||||||
|
3. Get your publishable key (pk_test_...) and secret key (sk_test_...)
|
||||||
|
4. Update the keys in:
|
||||||
|
- `clerk-auth.html` (line 66)
|
||||||
|
- Main `index.html` (add Clerk SDK)
|
||||||
|
|
||||||
|
### 2. Update Main HTML File
|
||||||
|
|
||||||
|
Add Clerk SDK to `index.html` before closing `</body>`:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- Clerk SDK -->
|
||||||
|
<script
|
||||||
|
async
|
||||||
|
crossorigin="anonymous"
|
||||||
|
data-clerk-publishable-key="pk_test_YOUR_KEY"
|
||||||
|
src="https://YOUR_FRONTEND_API/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
|
||||||
|
></script>
|
||||||
|
|
||||||
|
<!-- Clerk Protected Route -->
|
||||||
|
<script src="./clerk-integration/clerk-protected.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. Configure Clerk Dashboard
|
||||||
|
|
||||||
|
1. **Allowed Origins**: Add your domain(s)
|
||||||
|
- http://localhost:*
|
||||||
|
- https://YOUR_CLOUDFLARE_PAGES.pages.dev
|
||||||
|
- https://YOUR_CUSTOM_DOMAIN.com
|
||||||
|
|
||||||
|
2. **Social Login** (optional):
|
||||||
|
- Enable Google, GitHub, Apple
|
||||||
|
- Configure OAuth apps
|
||||||
|
|
||||||
|
3. **Appearance**:
|
||||||
|
- Theme: Dark
|
||||||
|
- Primary color: #F5A623
|
||||||
|
|
||||||
|
### 4. Deploy
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Update Clerk keys in files
|
||||||
|
# Deploy to Cloudflare Pages
|
||||||
|
wrangler pages deploy .
|
||||||
|
```
|
||||||
|
|
||||||
|
### 5. Test
|
||||||
|
|
||||||
|
1. Visit your site
|
||||||
|
2. You'll be redirected to sign-in
|
||||||
|
3. Create account or sign in
|
||||||
|
4. Access protected content
|
||||||
|
|
||||||
|
## Features Enabled
|
||||||
|
|
||||||
|
✅ Email/password authentication
|
||||||
|
✅ Social login (Google, GitHub, Apple)
|
||||||
|
✅ Multi-factor authentication (MFA)
|
||||||
|
✅ Passwordless sign-in
|
||||||
|
✅ User profile management
|
||||||
|
✅ Session management
|
||||||
|
✅ Organization support (teams)
|
||||||
|
|
||||||
|
## Files Created
|
||||||
|
|
||||||
|
- `clerk-auth.html` - Sign-in/sign-up page
|
||||||
|
- `clerk-protected.js` - Route protection script
|
||||||
|
- `README.md` - This file
|
||||||
|
|
||||||
|
## API Usage
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// Get current user
|
||||||
|
const user = Clerk.user;
|
||||||
|
|
||||||
|
// Sign out
|
||||||
|
await Clerk.signOut();
|
||||||
|
|
||||||
|
// Check authentication
|
||||||
|
if (Clerk.user) {
|
||||||
|
console.log('Authenticated');
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
🖤🛣️ Secure authentication powered by Clerk
|
||||||
108
clerk-integration/clerk-auth.html
Normal file
108
clerk-integration/clerk-auth.html
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Sign In - BlackRoad</title>
|
||||||
|
<style>
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
font-family: 'SF Pro Display', -apple-system, sans-serif;
|
||||||
|
background: #000;
|
||||||
|
color: #FFF;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.auth-container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 450px;
|
||||||
|
padding: 34px;
|
||||||
|
}
|
||||||
|
.auth-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 34px;
|
||||||
|
}
|
||||||
|
.auth-logo {
|
||||||
|
font-size: 55px;
|
||||||
|
margin-bottom: 21px;
|
||||||
|
}
|
||||||
|
.auth-title {
|
||||||
|
font-size: 34px;
|
||||||
|
font-weight: 700;
|
||||||
|
background: linear-gradient(135deg, #F5A623 38.2%, #2979FF 61.8%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
margin-bottom: 13px;
|
||||||
|
}
|
||||||
|
.auth-subtitle {
|
||||||
|
font-size: 16px;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
#clerk-auth {
|
||||||
|
background: rgba(255,255,255,0.03);
|
||||||
|
border: 1px solid rgba(255,255,255,0.1);
|
||||||
|
border-radius: 13px;
|
||||||
|
padding: 34px;
|
||||||
|
}
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 55px;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="auth-container">
|
||||||
|
<div class="auth-header">
|
||||||
|
<div class="auth-logo">🖤</div>
|
||||||
|
<h1 class="auth-title">Welcome to BlackRoad</h1>
|
||||||
|
<p class="auth-subtitle">Sign in to continue</p>
|
||||||
|
</div>
|
||||||
|
<div id="clerk-auth">
|
||||||
|
<div class="loading">Loading authentication...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Clerk SDK -->
|
||||||
|
<script
|
||||||
|
async
|
||||||
|
crossorigin="anonymous"
|
||||||
|
data-clerk-publishable-key="pk_test_YOUR_PUBLISHABLE_KEY"
|
||||||
|
src="https://YOUR_FRONTEND_API/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
|
||||||
|
type="text/javascript"
|
||||||
|
></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
window.addEventListener('load', async () => {
|
||||||
|
await Clerk.load();
|
||||||
|
|
||||||
|
const signInDiv = document.getElementById('clerk-auth');
|
||||||
|
|
||||||
|
// Mount Clerk sign-in component
|
||||||
|
Clerk.mountSignIn(signInDiv, {
|
||||||
|
appearance: {
|
||||||
|
elements: {
|
||||||
|
rootBox: 'w-full',
|
||||||
|
card: 'bg-transparent border-none shadow-none'
|
||||||
|
},
|
||||||
|
variables: {
|
||||||
|
colorPrimary: '#F5A623',
|
||||||
|
colorText: '#FFFFFF',
|
||||||
|
colorBackground: '#000000',
|
||||||
|
fontFamily: 'SF Pro Display, -apple-system, sans-serif'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
afterSignInUrl: '/dashboard',
|
||||||
|
signUpUrl: '/sign-up'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Check if user is already signed in
|
||||||
|
if (Clerk.user) {
|
||||||
|
window.location.href = '/dashboard';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
86
clerk-integration/clerk-protected.js
Normal file
86
clerk-integration/clerk-protected.js
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
// 🔐 Clerk Protected Route Wrapper
|
||||||
|
// Add this to any page that requires authentication
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
// Wait for Clerk to load
|
||||||
|
window.addEventListener('load', async () => {
|
||||||
|
// Check if Clerk is loaded
|
||||||
|
if (typeof Clerk === 'undefined') {
|
||||||
|
console.error('Clerk not loaded');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
await Clerk.load();
|
||||||
|
|
||||||
|
// Check if user is authenticated
|
||||||
|
if (!Clerk.user) {
|
||||||
|
// Redirect to sign-in
|
||||||
|
window.location.href = '/clerk-integration/clerk-auth.html';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// User is authenticated
|
||||||
|
console.log('✅ User authenticated:', Clerk.user.fullName);
|
||||||
|
|
||||||
|
// Add user info to page
|
||||||
|
addUserInfo(Clerk.user);
|
||||||
|
|
||||||
|
// Add sign-out button
|
||||||
|
addSignOutButton();
|
||||||
|
});
|
||||||
|
|
||||||
|
function addUserInfo(user) {
|
||||||
|
const userInfoDiv = document.createElement('div');
|
||||||
|
userInfoDiv.id = 'clerk-user-info';
|
||||||
|
userInfoDiv.style.cssText = `
|
||||||
|
position: fixed;
|
||||||
|
top: 21px;
|
||||||
|
right: 21px;
|
||||||
|
background: rgba(255,255,255,0.05);
|
||||||
|
border: 1px solid rgba(255,255,255,0.1);
|
||||||
|
border-radius: 13px;
|
||||||
|
padding: 13px 21px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 13px;
|
||||||
|
z-index: 1000;
|
||||||
|
`;
|
||||||
|
|
||||||
|
userInfoDiv.innerHTML = `
|
||||||
|
<img src="${user.profileImageUrl}" alt="${user.fullName}"
|
||||||
|
style="width: 34px; height: 34px; border-radius: 50%;">
|
||||||
|
<div>
|
||||||
|
<div style="font-weight: 600; font-size: 14px;">${user.fullName || user.username}</div>
|
||||||
|
<div style="font-size: 12px; opacity: 0.7;">${user.primaryEmailAddress.emailAddress}</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
document.body.appendChild(userInfoDiv);
|
||||||
|
}
|
||||||
|
|
||||||
|
function addSignOutButton() {
|
||||||
|
const signOutBtn = document.createElement('button');
|
||||||
|
signOutBtn.textContent = 'Sign Out';
|
||||||
|
signOutBtn.style.cssText = `
|
||||||
|
position: fixed;
|
||||||
|
top: 89px;
|
||||||
|
right: 21px;
|
||||||
|
background: linear-gradient(135deg, #F5A623 38.2%, #FF1D6C 61.8%);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 8px 21px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 1000;
|
||||||
|
`;
|
||||||
|
|
||||||
|
signOutBtn.addEventListener('click', async () => {
|
||||||
|
await Clerk.signOut();
|
||||||
|
window.location.href = '/clerk-integration/clerk-auth.html';
|
||||||
|
});
|
||||||
|
|
||||||
|
document.body.appendChild(signOutBtn);
|
||||||
|
}
|
||||||
|
})();
|
||||||
Reference in New Issue
Block a user