How to Enable SSO Login Using Firebase

Introduction

Provide your users with a unified, hassle-free authentication experience across your digital ecosystem. Muvi One's Firebase integration empowers you to enable Single Sign-On (SSO) for your website, allowing your end-users to log in to your website using their existing Google, Apple, or Facebook accounts.

Through this detailed tutorial, you will learn how to integrate Firebase's powerful SSO capabilities into your Muvi One platform. Your end-users will enjoy the convenience of logging in with their existing Google, Apple, or Facebook accounts, eliminating the need for repetitive credential entry across different domains, technologies, or platforms.

Embracing SSO will not only enhance user satisfaction but also improve overall platform security. Enabling you to deliver a premium, unified authentication experience that sets your digital offering apart.

Setting Up the Firebase Project

• Open the Firebase Console in your web browser.
• Click on the "Go to console" link in the top right corner of the page.
• Click on the "Get Started with a Firebase Project" button.
• Enter a project name, accept the terms and conditions, and click on "Continue".
• If you want analytics, toggle "Enable Google Analytics for this project". Otherwise, leave it disabled.
• If you selected “Google Analytics”, click on “Continue”.
• Under “Configure Google Analytics”, select your Google Account (if already configured for Google Analytics).
• Click on the "Create Project" button.
• After your Firebase project is created, you will get a confirmation message.
• Click on the "Continue" button.

Adding Firebase to Your App

For web apps, add Firebase to your web app by copying the Firebase configuration and initializing Firebase in your application.

• Click on the "Web" button under "Get started by adding Firebase to your app".
• Under “Register App”, type your “App Nickname” and click on the "Register App" button.
• Scroll down and click on "Continue to console".
• You will be redirected to the project overview page.

Enable Authentication Providers

• In the left menu, click on "Authentication" under the "Build" section.
• Click on the "Get started" button.

Enable Google as an Authentication Provider

• In the left menu of the Firebase Console, navigate to "Build"-->” Authentication”.
• Under “Authentication”, click on the "Sign-in method" tab,
• Under “Additional Providers”, click on "Google".
• Toggle the switch to enable Google authentication.
• Enter your email in the "Support email for project" field.
• Click on the "Save" button.
• Google as the authentication provider will be enabled.

Enable Facebook as an Authentication Provider

• In the left menu of the Firebase Console, navigate to "Build"-->” Authentication”.
• Under “Authentication”, click on the "Sign-in method" tab.
• Click on “Add New Provider”.
• Under “Additional Providers”, click on “Facebook”.
• Toggle the switch to enable Facebook authentication.
• Enter your Facebook App ID and App Secret that you already obtained from your Facebook Developer Account. Click here to learn how to get the Facebook App ID and Secret.
• Click on the "Save" button.
• Facebook as the authentication provider will be enabled.

Enable Apple as an Authentication Provider

• In the left menu of the Firebase Console, navigate to "Build"-->” Authentication”.
• Under “Authentication”, click on the "Sign-in method" tab.
• Click on “Add New Provider”.
• Under “Additional Providers”, click on “Apple”.
• Toggle the switch to enable Apple authentication.
• Enter your Apple Services ID (not mandatory for Apple) that you obtained from your Apple Developer Account.
• Click on the "Save" button.
• Apple as the authentication provider will be enabled.

Giving Authorization to Muvi for SSO Integration

If you are unable to enable SSO (for Google, Facebook, and/or Apple) and you need Muvi’s help to enable the SSO, then you must give authorization to Muvi for this. You need to give the Domain authorization and add Muvi as a member in the Firebase Console.

Authorizing Domain:

• In the left menu of the Firebase Console, navigate to "Build"-->” Authentication”.
• Under “Authentication”, click on the "Settings" tab.
• Click on “Authorize Domains”.
• Click on “Add Domain”.
• Type your domain name (e.g. muvi.com) and click on “Add”.
• Your domain will be added, and you can view it in the list.

Adding Muvi as a Member:

You must add Muvi as a member in the Firebase Console to enable the SSO integration.

• Next to "Project Overview", click on the “Settings” icon.
• Select "Users and permissions".
• Click on the "Add member" button.
• Enter "developer@muvi.com" in the email address field.
• Select "Editor" for the "Role" field and click on “Done”.
• Click on the "Add Member" button.