Skip to main content

Firebase Authentication

With just a few minor modifications to your Firebase project and a little front-end development, a website using Firebase as its identity platform can implement OwnID to simplify and streamline the login experience for its users. Integrating OwnID with a website that leverages Firebase involves three basic steps:

  • Use the OwnID Console to create an OwnID application
  • Use the Firebase Console to configure an existing Firebase project
  • Use the OwnID Web SDK to add the OwnID widget to your client-side pages

Step 1: Create OwnID Application#

An OwnID application connects your website's identity platform with the OwnID widget in the front end. First, you integrate with Firebase when creating the application. This OwnID application is assigned a unique appId that is then added to the website's front end. To create an OwnID application:

  1. Open the OwnID Console and create an account or log in to an existing account.
  2. Select Create Application.
  3. Define the details of the OwnID application, and select Next.
  4. If you are ready to configure Firebase and modify your front end, select the Firebase Authentication card and proceed to Step 2: Configure Firebase. If you would like to complete these steps later, select Skip for Now.

Step 2: Configure Firebase#

The OwnID-Firebase integration assumes you have already created a Firebase project and added the Firebase SDK to your website. If you created an OwnID application without starting the Firebase integration, open the application in the OwnID Console and select the Integration tab before taking the following steps.

Generate Private Key for the Firebase Admin SDK Service Account#

An Own ID application needs a private key for the Firebase Admin SDK service account in order to integrate itself with the Firebase project. Private keys associated with a service account provide the credentials needed to access Firebase services.

  1. In the Firebase Console, go to Gear icon > Project Settings > Service accounts. If you do not see the Service accounts tab, make sure you are an owner of the Firebase project.
  2. With Firebase Admin SDK highlighted, select Generate new private key, and then confirm by selecting Generate key. You are prompted to save the key as a JSON file.
  3. Use the OwnID console to choose or drag-and-drop the JSON file with the generated key.

Step 3: Add OwnID to Your Frontend#

Installing the OwnID SDK#

If a website uses a framework like Angular or ReactJS, it must install the OwnID SDK before adding the OwnID widget to its registration and login flows. To install the OwnID SDK for a framework, use the CLI to run:

npm install @ownid/react

or

yarn add @ownid/react

Initializing the OwnID SDK#

Regardless of whether a website is using a framework or javascript, the OwnID SDK needs to be included and initialized with the appId of the website's OwnID application. This unique appId can be obtained by opening the application in the OwnID Console.

Import the OwnIDInit component to your App component and configure it with the `appId` assigned to the application you are creating.
...
import { getAuth, getIdToken, signInWithCustomToken } from 'firebase/auth';
import { OwnIDInit } from '@ownid/react';
...
<OwnIDInit config={{ appId: '6ygnleg1m71ox7', sdk: 'firebase', firebaseAuth: {
getAuth,
getIdToken,
signInWithCustomToken
} }}/>

Login Page#

The following code demonstrates how to use the OwnID SDK with a login page. It includes the OwnID SDK, initializes the SDK with the appId of an OwnID application, and creates the OwnID widget.

Add references to elements and define an onLogin function. The onLogin function is executed when the user logs in with OwnID.

import {OwnID} from "@ownid/react";
function LoginComponent() {
const emailField = useRef(null);
const passwordField = useRef(null);
function onLogin() {
//redirecting user to the account page
window.location.href = '/account';
}
return (
<form>
<input ref={emailField} type="email" name="email" />
<input ref={passwordField} type="password" name="password" />
<button type="submit">Log In</button>
<OwnID type='login'
passwordField={passwordField}
loginIdField={emailField}
onError={(error) => console.error(error)}
onLogin={onLogin} />
</form>
);
}

Registration Page#

The following code demonstrates how to use the OwnID SDK with a registration page.

Add references to required elements, and modify the function that is called when the form is submitted

import { getAuth,createUserWithEmailAndPassword } from 'firebase/auth';
import { OwnID, ownidReactService } from "@ownid/react";
function RegisterComponent() {
const emailField = useRef(null);
const passwordField = useRef(null);
async function onSubmit() {
//Call your existing firebase register function
await createUserWithEmailAndPassword(getAuth(), emailField.current.value, passwordField.current.value);
//Enroll device with OwnID
await ownidReactService.enrollDevice();
}
return (
<form onSubmit={onSubmit}>
<input ref={emailField} type="email" name="email" />
<input ref={passwordField} type="password" name="password" />
<button type="submit">Register</button>
<OwnID type='register'
loginIdField={emailField}
passwordField={passwordField}
onError={(error) => console.error(error)} />
</form>
);
}

Customizing the UI#

The default code added to initialize the OwnID SDK has a single parameter: appId. In addition to this required parameter, there are optional parameters that can be added to the initialization code to modify the look of the OwnID button. Each parameter is added to the ownid function of the initialization code as a key/value pair of the JSON object. See how to customize the OwnID widget in this page.