GPT

Authentication Component

// src/components/Auth.astro import { auth } from '../lib/firebase.client'; import { signInWithEmailAndPassword, createUserWithEmailAndPassword, signOut } from 'firebase/auth'; let error = null; if (Astro.request.metho

Prompt text

Original English text. Replace placeholders with your own details.

---
// src/components/Auth.astro
import { auth } from '../lib/firebase.client';
import { signInWithEmailAndPassword, createUserWithEmailAndPassword, signOut } from 'firebase/auth';

let error = null;

if (Astro.request.method === 'POST') {
 const formData = await Astro.request.formData();
 const action = formData.get('action');
 const email = formData.get('email') as string;
 const password = formData.get('password') as string;

 try {
 if (action === 'login') {
 await signInWithEmailAndPassword(auth, email, password);
 return Astro.redirect('/dashboard');
 } else if (action === 'register') {
 await createUserWithEmailAndPassword(auth, email, password);
 return Astro.redirect('/dashboard');
 } else if (action === 'logout') {
 await signOut(auth);
 return Astro.redirect('/');
 }
 } catch (e: any) {
 error = e.message;
 }
}
---

<div>
 <form method="post">
 <div>
 <label for="email">Email:</label>
 <input
 id="email"
 name="email"
 type="email"
 required
 />
 </div>
 <div>
 <label for="password">Password:</label>
 <input
 id="password"
 name="password"
 type="password"
 required
 />
 </div>
 <div>
 <button type="submit" name="action" value="login">
 Login
 </button>
 <button type="submit" name="action" value="register">
 Register
 </button>
 </div>
 {error && <p class="error">{error}</p>}
 </form>
</div>

<script>
 import { auth } from '../lib/firebase.client';
 import { onAuthStateChanged } from 'firebase/auth';

 onAuthStateChanged(auth, (user) => {
 if (user) {
 console.log('User is signed in:', user);
 } else {
 console.log('User is signed out');
 }
 });
</script>

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 →