Skip to content

Instantly share code, notes, and snippets.

@DecisionNerd
Last active January 20, 2023 02:17
Show Gist options
  • Save DecisionNerd/e6e532c6982ddd63ff4024af814cb912 to your computer and use it in GitHub Desktop.
Save DecisionNerd/e6e532c6982ddd63ff4024af814cb912 to your computer and use it in GitHub Desktop.
generate a template and script in vue 3 using firebase/auth SDK version 9 signInWithPhoneNumber verifyRecaptcha. use tailwindcss. template has input for phone and input for otp code appears after submitting phone number.
<!-- Here is a template and script for a Vue 3 component that uses Firebase/Auth SDK version 9 to implement
phone number authentication with reCAPTCHA verification: -->
<template>
<div class="container mx-auto">
<form @submit.prevent="submitPhoneNumber" class="bg-white p-6 rounded-lg shadow-md">
<label class="block font-medium text-gray-700 mb-2">
Phone Number
</label>
<input
v-model="phoneNumber"
type="text"
class="border rounded-lg p-2 w-full"
placeholder="Enter your phone number"
/>
<button
class="bg-blue-500 text-white py-2 px-4 rounded-lg mt-4 hover:bg-blue-600"
type="submit"
>
Submit
</button>
</form>
<form v-if="showOTPInput" @submit.prevent="submitOTP" class="bg-white p-6 rounded-lg shadow-md mt-4">
<label class="block font-medium text-gray-700 mb-2">
OTP Code
</label>
<input
v-model="otpCode"
type="text"
class="border rounded-lg p-2 w-full"
placeholder="Enter the OTP code"
/>
<button
class="bg-blue-500 text-white py-2 px-4 rounded-lg mt-4 hover:bg-blue-600"
type="submit"
>
Verify
</button>
</form>
</div>
</template>
<script>
import { createAuth } from "@firebase/auth-compat";
import firebase from "firebase/app";
export default {
data() {
return {
phoneNumber: "",
otpCode: "",
showOTPInput: false,
recaptchaVerifier: null
};
},
methods: {
async submitPhoneNumber() {
try {
this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
"recaptcha-container",
{
size: "invisible"
}
);
const confirmationResult = await firebase
.auth()
.signInWithPhoneNumber(this.phoneNumber, this.recaptchaVerifier);
this.showOTPInput = true;
// Save confirmationResult on the component's data object for later use
this.confirmationResult = confirmationResult;
} catch (error) {
console.error(error);
}
},
async submitOTP() {
try {
const { user } = await this.confirmationResult.confirm(this.otpCode);
console.log("Phone number authentication successful", user);
} catch (error) {
console.error(error);
}
}
}
};
</script>
<style>
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/ut
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment