GPT

CORRECT HTML SETUP

Better Auth Authentication import { createAuthClient } from 'better-auth'; Log In Log Out import { createAuthClient } from 'better-auth'; let auth = null; // Initialize the Bette

Prompt text

Original English text. Replace placeholders with your own details.

<!DOCTYPE html>
<html>
<head>
 <title>Better Auth Authentication</title>
 <script type="module">
 import { createAuthClient } from 'better-auth';
 </script>
</head>
<body>
 <div id="auth-container">
 <form id="login-form" style="display: none;">
 <input type="email" id="email" placeholder="Email" required>
 <input type="password" id="password" placeholder="Password" required>
 <button type="submit">Log In</button>
 </form>
 <button id="logout" style="display: none;">Log Out</button>
 </div>
 <div id="profile" style="display: none;">
 <pre></pre>
 </div>

 <script type="module">
 import { createAuthClient } from 'better-auth';
 
 let auth = null;
 
 // Initialize the Better Auth client
 async function initializeAuth() {
 auth = createAuthClient({
 baseUrl: process.env.AUTH_API_URL
 });
 
 // Check for existing session
 const session = await auth.getSession();
 if (session) {
 await updateUI(true, session.user);
 } else {
 await updateUI(false);
 }
 }
 
 // Update UI based on authentication state
 async function updateUI(isAuthenticated, user = null) {
 const loginForm = document.getElementById('login-form');
 const logoutBtn = document.getElementById('logout');
 const profileDiv = document.getElementById('profile');
 
 if (isAuthenticated && user) {
 loginForm.style.display = 'none';
 logoutBtn.style.display = 'block';
 profileDiv.style.display = 'block';
 profileDiv.querySelector('pre').textContent = JSON.stringify(user, null, 2);
 } else {
 loginForm.style.display = 'block';
 logoutBtn.style.display = 'none';
 profileDiv.style.display = 'none';
 }
 }
 
 // Handle form submission
 document.getElementById('login-form').addEventListener('submit', async (e) => {
 e.preventDefault();
 
 try {
 const email = document.getElementById('email').value;
 const password = document.getElementById('password').value;
 
 const { user } = await auth.signIn({ email, password });
 await updateUI(true, user);
 } catch (error) {
 console.error('Login error:', error);
 alert('Login failed: ' + error.message);
 }
 });
 
 // Handle logout
 document.getElementById('logout').addEventListener('click', async () => {
 try {
 await auth.signOut();
 await updateUI(false);
 } catch (error) {
 console.error('Logout error:', error);
 alert('Logout failed: ' + error.message);
 }
 });
 
 // Initialize when the page loads
 window.addEventListener('load', initializeAuth);
 </script>
</body>
</html>

Source & attribution

Instructa AI Prompts · Instructa AI Prompts

Source-listed license: CC-BY-4.0. Prompt text is preserved; titles and previews may be shortened for display. Source examples are not NexGateHub test results.

View original source ↗ · Source credits & licenses

Explore more prompts →