How to Add a Custom Domain in Firebase Authentication?

How to Show a List of Databases in PL/SQL?

Firebase Authentication provides users with one of the most secure ways of logging in to their applications meant for the web or app. Firebase is a platform developed by Google which offers a wide range of tools and services to help developers build high-quality apps and websites.

In this article, We will learn about How to add a custom domain in Firebase authentication along with the steps in detail.

Prerequisites

Before we start, make sure we have the following:

A Firebase project was set up on the Firebase console.
It is also called the second-level domain which is usually purchased from a registration organization.
Ability to manage DNS records of the domain.

Steps to Add a Custom Domain

Step 1: Set Up Firebase Hosting (If Not Already Done)

If we haven’t already set up Firebase Hosting for our project, we need to do before adding a custom domain.
Firebase Hosting provides secure and scalable web hosting for our Firebase projects.

Follow these steps to set up Firebase Hosting:

# Install Firebase CLI (if not already installed)
npm install -g firebase-tools

# Login to your Firebase account
firebase login

# Initialize Firebase project (if not already initialized)
firebase init

Step 2: Configure Our Custom Domain

Once Firebase Hosting is set up, we can configure our custom domain for authentication. Here’s how:

Go to the Firebase console and select our project.
Navigate to the “Authentication” section.
In the Authentication panel, click on the “Sign-in method” tab.
Scroll down to the “Authorized domains” section.
Click on the “Add domain” button.
Enter our custom domain (for example: example.com) and click “Add“.

Step 3: Verify Domain Ownership

To verify ownership of your custom domain, Firebase requires us to add a TXT record to our domain’s DNS settings. Follow these steps:

Copy the TXT record provided by Firebase from the console.
Log in to our domain registrar’s website and go to the DNS management section.
Add a new TXT record with the provided value.
Save the changes and wait for the DNS records to propagate (this may take some time).

Step 4: Enable HTTPS for Your Custom Domain

Firebase Hosting provides free SSL certificates through Let’s Encrypt, allowing us to secure your custom domain with HTTPS. Here’s how to enable HTTPS:

Go to the Firebase console and select your project.
Navigate to the “Hosting” section.
In the Hosting panel, click on the “Connect domain” button next to our custom domain.

Follow the prompts to complete the setup, including selecting the option to configure SSL for our domain.

Step 5: Integrate Firebase Authentication into Your Web App

Now, let’s integrate Firebase Authentication into our web app:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Firebase Authentication Demo</title>
    <!-- Add Firebase SDK -->
    <script src="https://www.gstatic.com/firebasejs/9.1.3/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.1.3/firebase-auth.js"></script>
    <!-- Initialize Firebase -->
    <script>
      const firebaseConfig = {    apiKey: "AIzaSyDmaZAcK7xwQTAsQJxaGnG56oB8RIJDMnc",    authDomain: "samplep-d6b68.firebaseapp.com",    projectId: "samplep-d6b68",    storageBucket: "samplep-d6b68.appspot.com",    messagingSenderId: "398502093281",    appId: "1:398502093281:web:5d685b0733d4d6d66472a0",    measurementId: "G-9E6K9YD8D1"};
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    </script>
</head>
<body>
    <h1>Firebase Authentication Demo</h1>
    <button onclick="signIn()">Sign In with Google</button>
    <button onclick="signOut()">Sign Out</button>
    <script>
      function signIn() {
        const provider = new firebase.auth.GoogleAuthProvider();
        firebase.auth().signInWithPopup(provider)
          .then((result) => {
            console.log(result);
          })
          .catch((error) => {
            console.error(error);
          });
      }
      function signOut() {
        firebase.auth().signOut()
          .then(() => {
            console.log('Signed Out');
          })
          .catch((error) => {
            console.error('Sign Out Error', error);
          });
      }
    </script>
</body>
</html>

Output:

Conclusion

Overall, Acustom domain name for Firebase Authentication is an important element of branding and improves user experience of the application. By understanding the measures described above and adding Firebase Authentication to your web application, users will be able to authenticate themselves with the desired custom domain of your application easily and securely.

Tags:

#Firebase #Databases

How to handle authentication in Node?