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 > 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:

ReactJS

npm install @ownid/react

or

yarn add @ownid/react

Angular

npm install @ownid/angular

or

yarn add @ownid/angular

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.

ReactJS

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', firebaseAuth: {

getAuth,

getIdToken,

signInWithCustomToken

} }}/>

Angular

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 { OwnidAngularModule } from '@ownid/angular';

...

@NgModule({

...

imports: [

...

OwnidAngularModule.forRoot({ appId: '6ygnleg1m71ox7',

firebaseAuth: { getAuth, getIdToken, signInWithCustomToken }

}),

...

]})

JavaScript

Copy and paste the following code into the head of the pages where you want to add OwnID to your Login and Registration flows

<script>

((o,w,n,i,d)=>{o[i]=o[i]||(async(...a)=>((o[i].q=o[i].q||[]).push(a),{error:null,data:null})),

(d=w.createElement("script")).src='https://cdn.ownid.com/sdk/'+n,d.async=1,w.head.appendChild(d)})

(window,document,'<appID>','ownid');

</script>

Then, initialize OwnID

import { signInWithCustomToken, getIdToken, getAuth } from 'firebase/auth';

ownid('init', {

appId: '6ygnleg1m71ox7',

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.

ReactJS

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>

);

}

Angular

Add the ownid component to the HTML template of the login page

<form #myForm="ngForm" (ngSubmit)="onSubmit()">

<input #emailField type="email">

<input #passwordField type="password">

<ownid [type]="login"

[loginIdField]="emailField"

[passwordField]="passwordField"

(onLogin)="onLogin()">

</ownid>

<button type="submit">Log In</button>

</form>

Now, define the onLogin function that is executed when the user logs in with OwnID

...

import {WidgetType} from "@ownid/angular";

login: WidgetType = WidgetType.Login;

...

onLogin() {

//redirect user to the account page

this.router.navigateByUrl('/account');

}

JavaScript

Copy and paste the following code into the body of your Login page (bellow your input tags), then change the loginId field, password field and submit button to reference your form elements.

<script>

ownid('login', {

loginIdField: document.getElementById('email'),

passwordField: document.getElementById('password'),

onLogin: () => {

// Insert code that is executed after user logs in with OwnID

},

});

</script>

Registration Page

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

ReactJS

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>

);

}

Angular

Add the ownid component to the HTML template your page

<form #myForm="ngForm" (ngSubmit)="onSubmit()">

<input #emailField type="email">

<input #passwordField type="password">

<ownid [type]="register"

(onError)="onError($event)"

[loginIdField]="emailField"

[passwordField]="passwordField">

</ownid>

<button type="submit">Register</button>

</form>

Then, add OwnID enrollDevice function right after calling your existing registration function.

...

import { OwnidAngularService, WidgetType } from '@ownid/angular';

import { getAuth, createUserWithEmailAndPassword } from 'firebase/auth';

register: WidgetType = WidgetType.Register;

...

constructor(private ownidAngularService: OwnidAngularService) {}

...

async onSubmit() {

//Call your existing firebase register function

await createUserWithEmailAndPassword(getAuth(), '<email>', '<password>');

//Enroll device with OwnID

await this.ownidAngularService.enrollDevice();

}

JavaScript

Define OwnID register function bellow your input tags

<body>

<form name="myForm" onsubmit="return onSubmit(this)">

<input id="email" type="text" name="email">

<input id="password" type="text" name="password">

<input type="submit" value="Submit">

</form>

<script>

ownid("register", {

passwordField: document.getElementById("password"),

loginIdField: document.getElementById("email"),

});

</script>

</body>

Then, call OwnID enrollDevice right after your firebase register function

import { getAuth, createUserWithEmailAndPassword } from 'firebase/auth';

async function onSubmit(formData) {

//Call your existing firebase register function

await createUserWithEmailAndPassword(getAuth(), formData.email.value, formData.password.value);

//Enroll device with OwnID

await ownid('enrollDevice');

}

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.