জাভাস্ক্রিপ্টে ইমেল লিঙ্ক ব্যবহার করে Firebase-এর মাধ্যমে যাচাইকরণ

আপনি Firebase Authentication ব্যবহার করে কোনও ব্যবহারকারীকে একটি লিঙ্ক সহ ইমেল পাঠিয়ে সাইন-ইন করতে দিতে পারেন যেটিতে ক্লিক করে তিনি সাইন-ইন করতে পারবেন। এই প্রসেসে, ব্যবহারকারীর ইমেল আইডিও যাচাই করা হয়।

ইমেল দিয়ে সাইন-ইন করার অনেক সুবিধা আছে:

• সহজ সাইন-আপ ও সাইন-ইন প্রসেস।
• বিভিন্ন অ্যাপ্লিকেশনে পাসওয়ার্ড আবার ব্যবহার করার ঝুঁকি কম, যা ভালভাবে বেছে নেওয়া পাসওয়ার্ডের সুরক্ষাকেও দুর্বল করে দিতে পারে।
• ব্যবহারকারীকে যাচাই করার পাশাপাশি তিনি যে ইমেল আইডির বৈধ মালিক তা যাচাই করার ক্ষমতা।
• সাইন-ইন করার জন্য ব্যবহারকারীর শুধু অ্যাক্সেস করা যায় এমন একটি ইমেল অ্যাকাউন্ট প্রয়োজন। ফোন নম্বর বা সোশ্যাল মিডিয়া অ্যাকাউন্টের মালিকানা থাকার প্রয়োজন নেই।
• ব্যবহারকারীকে পাসওয়ার্ড দিতে (বা মনে রাখতে) হবে না, এর ফলে তিনি নিরাপদে সাইন-ইন করতে পারবেন। মোবাইল ডিভাইসে পাসওয়ার্ড দেওয়া বেশ কঠিন হতে পারে।
• আগে ইমেল শনাক্তকারী (পাসওয়ার্ড বা ফেডারেটেড) দিয়ে সাইন-ইন করেছেন এমন কোনও বর্তমান ব্যবহারকারীকে শুধু ইমেল দিয়ে সাইন-ইন করার জন্য আপগ্রেড করা যেতে পারে। যেমন, কোনও ব্যবহারকারী পাসওয়ার্ড ভুলে গেলেও, পাসওয়ার্ড রিসেট না করেই সাইন-ইন করতে পারবেন।

শুরু করার আগে

আপনি আগে থেকে এটি না করে থাকলে, Firebase কনসোল থেকে আপনার প্রোজেক্টে ইনিশিয়ালাইজেশন স্নিপেট কপি করুন, যেমনটি আপনার JavaScript প্রোজেক্টে Firebase যোগ করুন নিবন্ধে বর্ণনা করা হয়েছে।

আপনার Firebase প্রোজেক্টের জন্য ইমেল লিঙ্ক সাইন-ইন চালু করা

ইমেল লিঙ্ক ব্যবহার করে ব্যবহারকারীদের সাইন-ইন করতে দিতে, আপনাকে প্রথমে Firebase প্রোজেক্টের জন্য ইমেল পরিষেবা প্রদানকারী এবং ইমেল লিঙ্ক সাইন-ইন পদ্ধতি চালু করতে হবে:

1. Firebase কনসোলে, নিরাপত্তা > যাচাইকরণ বিকল্পে যান।

2. সাইন-ইন পদ্ধতি ট্যাবে, ইমেল/পাসওয়ার্ড সাইন-ইন পদ্ধতি চালু করুন। মনে রাখবেন, ইমেল লিঙ্ক সাইন-ইন ব্যবহার করতে হলে ইমেল/পাসওয়ার্ড সাইন-ইন চালু করতে হবে।

3. একই বিভাগে, ইমেল লিঙ্ক (পাসওয়ার্ড ছাড়া সাইন-ইন) সাইন-ইন পরিষেবা চালু করুন।

4. সেভ করুন বিকল্পে ক্লিক করুন।

ব্যবহারকারীর ইমেল আইডিতে যাচাইকরণের লিঙ্ক পাঠানো

পরিচয় যাচাইকরণ ফ্লো শুরু করতে, ব্যবহারকারীকে এমন একটি ইন্টারফেস দিন যা ব্যবহারকারীকে তার ইমেল আইডি দিতে প্রম্পট করে এবং তারপরে sendSignInLinkToEmail-কে কল করে Firebase-কে অনুরোধ করে যে সেটি যেন ব্যবহারকারীর ইমেলে পরিচয় যাচাইকরণ লিঙ্ক পাঠায়।

1. ActionCodeSettings অবজেক্ট তৈরি করুন, যা Firebase-কে ইমেল লিঙ্ক তৈরি করার নির্দেশাবলী প্রদান করে। নিম্নলিখিত ফিল্ড সেট করুন:

   • url: এম্বেড করার জন্য ডিপ লিঙ্ক এবং অতিরিক্ত কোনও স্টেট পাস করতে হবে কিনা। আপনি আগে থেকে না করে থাকলে, অনুমোদিত ডোমেনের তালিকায় আপনার ডোমেন যোগ করুন:

     1. Firebase কনসোলে, নিরাপত্তা > অনুমোদন > সেটিংস ট্যাব বিকল্পে যান।

     2. অনুমোদিত ডোমেন বিভাগে, ডোমেন যোগ করুন বিকল্পে ক্লিক করুন এবং আপনার ডোমেন যোগ করুন।

   • android ও ios: Firebase Authentication-কে এটি নির্ধারণ করতে সাহায্য করে যে এটি ওয়েব-অনলি বা মোবাইল লিঙ্ক তৈরি করবে কিনা যা Android বা Apple ডিভাইসে খোলা হয়।
   • handleCodeInApp: 'সত্য' হিসেবে সেট করা আছে। অন্যান্য আউট-অফ-ব্যান্ড ইমেল অ্যাকশনের (পাসওয়ার্ড রিসেট ও ইমেল যাচাইকরণ) মতো সাইন-ইন অপারেশন অ্যাপেই সম্পূর্ণ করতে হবে। এর কারণ হল, ফ্লোয়ের শেষে, ব্যবহারকারীকে সাইন-ইন করতে হবে এবং অ্যাপের মধ্যে তার Auth স্টেট সেভ করা থাকবে।
   • linkDomain: কোনও প্রজেক্টের জন্য কাস্টম Hosting লিঙ্ক ডোমেন নির্দিষ্ট করা থাকলে, নির্দিষ্ট মোবাইল অ্যাপের মাধ্যমে লিঙ্কটি খোলার সময় কোনটি ব্যবহার করতে হবে তা নির্দিষ্ট করুন। অন্যথায়, ডিফল্ট ডোমেন অটোমেটিক বেছে নেওয়া হবে (যেমন, PROJECT_ID.firebaseapp.com)।

   • dynamicLinkDomain: শীঘ্রই বন্ধ হয়ে যাবে। এই প্যারামিটার নির্দিষ্ট করবেন না।

     Web

     const actionCodeSettings = {
       // URL you want to redirect back to. The domain (www.example.com) for this
       // URL must be in the authorized domains list in the Firebase Console.
       url: 'https://www.example.com/finishSignUp?cartId=1234',
       // This must be true.
       handleCodeInApp: true,
       iOS: {
         bundleId: 'com.example.ios'
       },
       android: {
         packageName: 'com.example.android',
         installApp: true,
         minimumVersion: '12'
       },
       // The domain must be configured in Firebase Hosting and owned by the project.
       linkDomain: 'custom-domain.com'
     };
     auth_email_link_actioncode_settings.js

     Web

     var actionCodeSettings = {
       // URL you want to redirect back to. The domain (www.example.com) for this
       // URL must be in the authorized domains list in the Firebase Console.
       url: 'https://www.example.com/finishSignUp?cartId=1234',
       // This must be true.
       handleCodeInApp: true,
       iOS: {
         bundleId: 'com.example.ios'
       },
       android: {
         packageName: 'com.example.android',
         installApp: true,
         minimumVersion: '12'
       },
       dynamicLinkDomain: 'example.page.link'
     };
     email-link-auth.js

   ActionCodeSettings সম্পর্কে আরও জানতে, ইমেল অ্যাকশনে স্টেট পাস করা বিভাগটি দেখুন।

2. ব্যবহারকারীর ইমেল আইডি লিখুন।

3. ব্যবহারকারীর ইমেলে যাচাইকরণ লিঙ্ক পাঠান এবং ব্যবহারকারী একই ডিভাইসে ইমেল সাইন-ইন সম্পূর্ণ করলে ব্যবহারকারীর ইমেল আইডি সেভ করুন।

   Web

   import { getAuth, sendSignInLinkToEmail } from "firebase/auth";
   
   const auth = getAuth();
   sendSignInLinkToEmail(auth, email, actionCodeSettings)
     .then(() => {
       // The link was successfully sent. Inform the user.
       // Save the email locally so you don't need to ask the user for it again
       // if they open the link on the same device.
       window.localStorage.setItem('emailForSignIn', email);
       // ...
     })
     .catch((error) => {
       const errorCode = error.code;
       const errorMessage = error.message;
       // ...
     });
   auth_email_link_send.js

   Web

   firebase.auth().sendSignInLinkToEmail(email, actionCodeSettings)
     .then(() => {
       // The link was successfully sent. Inform the user.
       // Save the email locally so you don't need to ask the user for it again
       // if they open the link on the same device.
       window.localStorage.setItem('emailForSignIn', email);
       // ...
     })
     .catch((error) => {
       var errorCode = error.code;
       var errorMessage = error.message;
       // ...
     });
   email-link-auth.js

ইমেল লিঙ্কের মাধ্যমে সাইন-ইন করা সম্পূর্ণ করুন

নিরাপত্তা সংক্রান্ত উদ্বেগ

কোনও অনাকাঙ্ক্ষিত ব্যবহারকারী বা অনাকাঙ্ক্ষিত ডিভাইসে সাইন-ইন লিঙ্ক ব্যবহার করে সাইন-ইন করা আটকাতে, সাইন-ইন ফ্লো সম্পূর্ণ করার সময় Firebase Auth-এর ব্যবহারকারীর ইমেল আইডি প্রদান করতে হবে। সাইন-ইন করার প্রক্রিয়া সম্পূর্ণ হতে হলে, এই ইমেল আইডির সাথে সেই আইডিটি মিলতে হবে যেখানে সাইন-ইন লিঙ্কটি আসল পাঠানো হয়েছিল।

আপনি সাইন-ইন ইমেল পাঠানোর সময়, ব্যবহারকারী যে ডিভাইস থেকে লিঙ্ক চেয়েছেন সেই একই ডিভাইসে সাইন-ইন লিঙ্ক খুললে, তাদের ইমেল আইডি লোকালি স্টোর করে - যেমন, localStorage বা কুকি ব্যবহার করে - এই ফ্লোটি স্ট্রিমলাইন করতে পারেন। তারপর, ফ্লো সম্পূর্ণ করতে এই ঠিকানা ব্যবহার করুন। রিডাইরেক্ট URL প্যারামিটারে ব্যবহারকারীর ইমেল আইডি পাস করবেন না এবং এটি আবার ব্যবহার করবেন না, কারণ এটি সেশন ইনজেকশন চালু করতে পারে।

সাইন-ইন প্রসেস সম্পূর্ণ হওয়ার পরে, সাইন-ইন করার কোনও আগের যাচাই না করা পদ্ধতি ব্যবহারকারীর অ্যাকাউন্ট থেকে সরিয়ে দেওয়া হবে এবং আগে থেকে থাকা সেশন বাতিল করা হবে। যেমন, যদি কেউ আগে একই ইমেল ও পাসওয়ার্ড দিয়ে যাচাই না করা অ্যাকাউন্ট তৈরি করে থাকেন, তাহলে সেই ব্যবহারকারীর পাসওয়ার্ড সরিয়ে দেওয়া হবে। এর ফলে, যে প্রতারক মালিকানা দাবি করে যাচাই না করা অ্যাকাউন্ট তৈরি করেছে, সে যাচাই না করা ইমেল ও পাসওয়ার্ড দিয়ে আবার সাইন-ইন করতে পারবে না।

এছাড়াও, নিশ্চিত করুন যে আপনি প্রোডাকশনে HTTPS URL ব্যবহার করছেন যাতে আপনার লিঙ্ক সম্ভাব্যভাবে মধ্যস্থতাকারী সার্ভার দ্বারা ইন্টারসেপ্ট করা এড়ানো যায়।

ওয়েবপেজে সাইন-ইন সম্পূর্ণ করা

ইমেল লিঙ্ক ডিপ লিঙ্কের ফর্ম্যাট আউট-অফ-ব্যান্ড ইমেল অ্যাকশনের জন্য ব্যবহৃত ফর্ম্যাটের (ইমেল যাচাইকরণ, পাসওয়ার্ড রিসেট করা এবং ইমেল পরিবর্তন প্রত্যাহার করা) মতো একই। Firebase Auth এই যাচাইকরণকে সহজ করে দেয়, এর জন্য isSignInWithEmailLink API প্রদান করে, যার মাধ্যমে কোনও লিঙ্ক ইমেল লিঙ্ক দিয়ে সাইন-ইন করার লিঙ্ক কিনা তা চেক করা যায়।

ল্যান্ডিং পৃষ্ঠায় সাইন-ইন করার প্রসেস সম্পূর্ণ করতে, signInWithEmailLink-এ কল করুন এবং ব্যবহারকারীর ইমেল ও আসল ইমেল লিঙ্ক দিন যাতে এককালীন কোড থাকে।

import { getAuth, isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth";

// Confirm the link is a sign-in with email link.
const auth = getAuth();
if (isSignInWithEmailLink(auth, window.location.href)) {
  // Additional state parameters can also be passed via URL.
  // This can be used to continue the user's intended action before triggering
  // the sign-in operation.
  // Get the email if available. This should be available if the user completes
  // the flow on the same device where they started it.
  let email = window.localStorage.getItem('emailForSignIn');
  if (!email) {
    // User opened the link on a different device. To prevent session fixation
    // attacks, ask the user to provide the associated email again. For example:
    email = window.prompt('Please provide your email for confirmation');
  }
  // The client SDK will parse the code from the link for you.
  signInWithEmailLink(auth, email, window.location.href)
    .then((result) => {
      // Clear email from storage.
      window.localStorage.removeItem('emailForSignIn');
      // You can access the new user by importing getAdditionalUserInfo
      // and calling it with result:
      // getAdditionalUserInfo(result)
      // You can access the user's profile via:
      // getAdditionalUserInfo(result)?.profile
      // You can check if the user is new or existing:
      // getAdditionalUserInfo(result)?.isNewUser
    })
    .catch((error) => {
      // Some error occurred, you can inspect the code: error.code
      // Common errors could be invalid email and invalid or expired OTPs.
    });
}
email_link_complete.js

// Confirm the link is a sign-in with email link.
if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
  // Additional state parameters can also be passed via URL.
  // This can be used to continue the user's intended action before triggering
  // the sign-in operation.
  // Get the email if available. This should be available if the user completes
  // the flow on the same device where they started it.
  var email = window.localStorage.getItem('emailForSignIn');
  if (!email) {
    // User opened the link on a different device. To prevent session fixation
    // attacks, ask the user to provide the associated email again. For example:
    email = window.prompt('Please provide your email for confirmation');
  }
  // The client SDK will parse the code from the link for you.
  firebase.auth().signInWithEmailLink(email, window.location.href)
    .then((result) => {
      // Clear email from storage.
      window.localStorage.removeItem('emailForSignIn');
      // You can access the new user via result.user
      // Additional user info profile not available via:
      // result.additionalUserInfo.profile == null
      // You can check if the user is new or existing:
      // result.additionalUserInfo.isNewUser
    })
    .catch((error) => {
      // Some error occurred, you can inspect the code: error.code
      // Common errors could be invalid email and invalid or expired OTPs.
    });
}
email-link-auth.js

মোবাইল অ্যাপে সাইন-ইন করা

Firebase Authentication, Firebase Hosting ব্যবহার করে মোবাইল ডিভাইসে ইমেল লিঙ্ক পাঠায়। মোবাইল অ্যাপ্লিকেশনের মাধ্যমে সাইন-ইন সম্পূর্ণ করার জন্য, ইনকামিং অ্যাপ্লিকেশন লিঙ্ক শনাক্ত করতে, অন্তর্নিহিত ডিপ লিঙ্ক পার্স করতে এবং তারপরে ওয়েব ফ্লোর মাধ্যমে যেভাবে করা হয় সেইভাবে সাইন-ইন সম্পূর্ণ করতে অ্যাপ্লিকেশনটি কনফিগার করতে হবে।

Android অ্যাপ্লিকেশনে ইমেল লিঙ্ক দিয়ে সাইন-ইন করার সুবিধা কীভাবে ম্যানেজ করবেন সেই সম্পর্কে আরও জানতে, Android নির্দেশিকা দেখুন।

Apple অ্যাপ্লিকেশনে ইমেল লিঙ্ক দিয়ে সাইন-ইন কীভাবে ম্যানেজ করবেন সেই সম্পর্কে আরও জানতে, Apple প্ল্যাটফর্ম গাইড দেখুন।

ইমেল লিঙ্কের মাধ্যমে লিঙ্ক করা/আবার যাচাইকরণ করা

এছাড়াও, আপনি এই যাচাইকরণ পদ্ধতিটি আগে থেকে থাকা কোনও ব্যবহারকারীর সাথে লিঙ্ক করতে পারেন। যেমন কোনও ব্যবহারকারী আগে ফোন নম্বরের মতো অন্য কোনও পরিষেবা প্রদানকারীর সাথে যাচাই করিয়ে থাকলে, তিনি নিজের বর্তমান অ্যাকাউন্টে সাইন-ইন করার এই পদ্ধতি যোগ করতে পারবেন।

অপারেশনের দ্বিতীয় অংশে পার্থক্য দেখা যাবে:

import { getAuth, linkWithCredential, EmailAuthProvider } from "firebase/auth";

// Construct the email link credential from the current URL.
const credential = EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Link the credential to the current user.
const auth = getAuth();
linkWithCredential(auth.currentUser, credential)
  .then((usercred) => {
    // The provider is now successfully linked.
    // The phone user can now sign in with their phone number or email.
  })
  .catch((error) => {
    // Some error occurred.
  });
auth_email_link_link.js

// Construct the email link credential from the current URL.
var credential = firebase.auth.EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Link the credential to the current user.
firebase.auth().currentUser.linkWithCredential(credential)
  .then((usercred) => {
    // The provider is now successfully linked.
    // The phone user can now sign in with their phone number or email.
  })
  .catch((error) => {
    // Some error occurred.
  });
email-link-auth.js

এছাড়াও, কোনও সংবেদনশীল অপারেশন চালানোর আগে ইমেল লিঙ্ক ব্যবহারকারীকে আবার যাচাই করতে এটি ব্যবহার করা যেতে পারে।

import { getAuth, reauthenticateWithCredential, EmailAuthProvider } from "firebase/auth";

// Construct the email link credential from the current URL.
const credential = EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Re-authenticate the user with this credential.
const auth = getAuth();
reauthenticateWithCredential(auth.currentUser, credential)
  .then((usercred) => {
    // The user is now successfully re-authenticated and can execute sensitive
    // operations.
  })
  .catch((error) => {
    // Some error occurred.
  });
auth_email_link_reauth.js

// Construct the email link credential from the current URL.
var credential = firebase.auth.EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Re-authenticate the user with this credential.
firebase.auth().currentUser.reauthenticateWithCredential(credential)
  .then((usercred) => {
    // The user is now successfully re-authenticated and can execute sensitive
    // operations.
  })
  .catch((error) => {
    // Some error occurred.
  });
email-link-auth.js

তবে, ফ্লোটি অন্য একটি ডিভাইসে শেষ হতে পারে যেখানে আসল ব্যবহারকারী লগ-ইন করেননি, তাই এই ফ্লোটি সম্পূর্ণ নাও হতে পারে। সেই ক্ষেত্রে, ব্যবহারকারীকে একটি এরর মেসেজ দেখানো হতে পারে যাতে তিনি একই ডিভাইসে লিঙ্কটি খুলতে বাধ্য হন। অপারেশনের ধরন এবং ব্যবহারকারীর UID সম্পর্কে তথ্য প্রদান করতে লিঙ্কে কিছু স্টেট পাস করা যেতে পারে।

পুরনো হয়ে গেছে: ইমেল-পাসওয়ার্ড ও ইমেল লিঙ্কের মধ্যে পার্থক্য করা

আপনি ১৫ সেপ্টেম্বর, ২০২৩ তারিখে বা তার পরে আপনার প্রোজেক্ট তৈরি করে থাকলে, ডিফল্ট হিসেবে ইমেল এনুমেরেশন সুরক্ষা চালু করা থাকে। এই ফিচারটি আপনার প্রজেক্টের ব্যবহারকারীর অ্যাকাউন্টের নিরাপত্তা উন্নত করে, কিন্তু এটি fetchSignInMethodsForEmail() পদ্ধতি বন্ধ করে দেয়, যা আমরা আগে শনাক্তকারী-ফার্স্ট ফ্লো প্রয়োগ করার জন্য সাজেস্ট করেছিলাম।

যদিও আপনি নিজের প্রোজেক্টের জন্য ইমেল এনুমেরেশন সুরক্ষা বন্ধ করতে পারবেন, তবে আমরা এটি না করার পরামর্শ দিই।

আরও বিবরণের জন্য ইমেল এনুমেরেশন সুরক্ষা সম্পর্কিত ডকুমেন্টেশন দেখুন।

লিঙ্ক ব্যবহার করে সাইন-ইন করার জন্য ডিফল্ট ইমেল টেমপ্লেট

ডিফল্ট ইমেল টেমপ্লেটে সাবজেক্ট ও ইমেলের মূল অংশে টাইমস্ট্যাম্প থাকে যাতে পরবর্তী ইমেলগুলি একটি থ্রেডে একত্রিত না হয় এবং লিঙ্কটি লুকিয়ে না যায়।

এই টেমপ্লেট নিম্নলিখিত ভাষার ক্ষেত্রে প্রযোজ্য:

পরবর্তী ধাপ

কোনও ব্যবহারকারী প্রথমবার সাইন-ইন করার পরে, একটি নতুন ব্যবহারকারীর অ্যাকাউন্ট তৈরি করা হয় এবং ক্রেডেনশিয়ালের সাথে লিঙ্ক করা হয়—অর্থাৎ, ব্যবহারকারীর নাম এবং পাসওয়ার্ড, ফোন নম্বর বা ব্যবহারকারী যে তথ্য দিয়ে সাইন-ইন করেছেন তা প্রদানকারীর তথ্য। এই নতুন অ্যাকাউন্ট আপনার Firebase প্রোজেক্টের অংশ হিসেবে স্টোর করা হয় এবং ব্যবহারকারী কীভাবে সাইন-ইন করেছেন তা নির্বিশেষে, আপনার প্রোজেক্টের প্রতিটি অ্যাপ জুড়ে কোনও ব্যবহারকারীকে শনাক্ত করতে ব্যবহার করা যেতে পারে।

• আপনার অ্যাপে, ব্যবহারকারীর অনুমোদনের স্ট্যাটাস জানার জন্য সাজেস্ট করা পদ্ধতি হল, Auth অবজেক্টে একটি অবজ়ার্ভার সেট করা। আপনি তারপরে User অবজেক্ট থেকে ব্যবহারকারীর প্রাথমিক প্রোফাইল সংক্রান্ত তথ্য পেতে পারেন। ব্যবহারকারীদের ম্যানেজ করা দেখুন।

• আপনার Firebase Realtime Database এবং Cloud Storage নিরাপত্তা বিধিতে, আপনি auth ভেরিয়েবল থেকে সাইন-ইন করা ব্যবহারকারীর অনন্য ব্যবহারকারী আইডি পেতে এবং ব্যবহারকারী কোন ডেটা অ্যাক্সেস করতে পারবেন তা নিয়ন্ত্রণ করতে এটি ব্যবহার করতে পারবেন।

আপনি আগে থেকে থাকা ব্যবহারকারীর অ্যাকাউন্টের সাথে অনুমোদন প্রদানকারীর ক্রেডেনশিয়াল লিঙ্ক করে একাধিক অনুমোদন প্রদানকারীর মাধ্যমে আপনার অ্যাপে সাইন-ইন করার জন্য ব্যবহারকারীদের অনুমতি দিতে পারেন।

কোনও ব্যবহারকারীকে সাইন-আউট করতে, signOut-এ কল করুন:

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js