GPT

Authentication Component

import { ref } from 'vue'; import { useRouter } from 'vue-router'; import { useCurrentUser, useFirebaseAuth } from 'vuefire'; import { signInWithEmailAndPassword, createUserWithEmailAndPassword, signOut } from 'firebase/

Prompt text

Original English text. Replace placeholders with your own details.

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useCurrentUser, useFirebaseAuth } from 'vuefire';
import { signInWithEmailAndPassword, createUserWithEmailAndPassword, signOut } from 'firebase/auth';

const router = useRouter();
const auth = useFirebaseAuth()!;
const user = useCurrentUser();

const form = ref({
 email: '',
 password: ''
});
const error = ref<string | null>(null);
const loading = ref(false);
const isLogin = ref(true);

const handleSubmit = async () => {
 loading.value = true;
 error.value = null;

 try {
 if (isLogin.value) {
 await signInWithEmailAndPassword(auth, form.value.email, form.value.password);
 } else {
 await createUserWithEmailAndPassword(auth, form.value.email, form.value.password);
 }
 router.push('/dashboard');
 } catch (err: any) {
 error.value = err.message;
 } finally {
 loading.value = false;
 }
};

const handleLogout = async () => {
 try {
 await signOut(auth);
 router.push('/login');
 } catch (err: any) {
 console.error('Logout failed:', err);
 }
};
</script>

<template>
 <div v-if="user">
 <h2>Welcome, {{ user.email }}</h2>
 <button @click="handleLogout" :disabled="loading">
 {{ loading ? 'Logging out...' : 'Logout' }}
 </button>
 </div>
 <div v-else>
 <h2>{{ isLogin ? 'Login' : 'Register' }}</h2>
 <form @submit.prevent="handleSubmit">
 <div>
 <label for="email">Email:</label>
 <input
 id="email"
 v-model="form.email"
 type="email"
 required
 />
 </div>
 <div>
 <label for="password">Password:</label>
 <input
 id="password"
 v-model="form.password"
 type="password"
 required
 />
 </div>
 <button type="submit" :disabled="loading">
 {{ loading ? 'Processing...' : (isLogin ? 'Login' : 'Register') }}
 </button>
 <p v-if="error" class="error">{{ error }}</p>
 </form>
 <p>
 {{ isLogin ? "Don't have an account?" : "Already have an account?" }}
 <button @click="isLogin = !isLogin">
 {{ isLogin ? 'Register' : 'Login' }}
 </button>
 </p>
 </div>
</template>

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 →