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 management system 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 management system with the OwnID widget in the front end. First, you integrate with Firebase when creating the application. This OwnID application is assigned a unique Server URL 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.

Define Firestore Security Rules#

You need to define basic Firestore Security Rules that provide access control for websites using OwnID. These rules protect the database from attempts to access data with unauthorized client-side modifications. To define the security rules required by OwnID:

  1. In the Firebase Console, select Firestore Database > Rules.
  2. Enter the following rules in the text box:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /ownid {
allow read, write : if false
}
}
}
  1. Select Publish.

Confirm Email/Password Authentication#

If you have not already done so, you need to enable the Email/Password sign-in method for your Firebase authentication. To verify that the Email/Password sign-in method is enabled:

  1. In the Firebase Console, select Authentication > Sign-in method.
  2. Find Email/Password and confirm that its status is Enabled. If the status is disabled, select the Pencil icon to open the configuration, switch the Enabled toggle, and select Save.

Confirm Password Recovery URL#

Firebase authentication provides a template that sends an email to a user when they cannot remember their password. This email template must be configured so users are directed to your website's Account Recovery page, which can include the OwnID widget. To verify that the Firebase email template includes the URL of the Account Recovery page:

  1. In the Firebase Console, select Authentication > Templates.
  2. Select Password reset
  3. Select the Pencil icon to edit the template.
  4. Confirm that the Action URL field specifies the URL of your website's Account Recovery page. If it does not, select Customize action URL, enter the correct URL, and confirm by selecting Save twice.

Step 3: Add OwnID to Your Flows#

The OwnID SDK includes straightforward functions that are called from your front-end code to add OwnID to your authentication flows such as login and registration. Each flow has its own variation of an OwnID widget that makes passwordless authentication possible. The ownid function creates the appropriate variation of the widget based on its first argument: login creates a widget for a login page, register creates a widget for a registration page, recover creates a widget for an account recovery page, and link creates a widget for a page that allows a user to link OwnID to their existing account.

Including the OwnID SDK#

Every HTML page that uses the OwnID widget must reference the OwnID SDK script file. Place the following code in the head or body of each page. If it is inserted in the body, it must come before the code that creates the widget.

<script>
(function (w, d, s, u, o, e, p, a) {w[o] = w[o] || function () {
a=arguments,(w[o].q = w[o].q || []).push(a);'function'==typeof a[a.length - 1]&&a[a.length - 1](Promise.resolve())},
e = d.createElement(s), p = d.getElementsByTagName(s)[0];e.src = u;e.async = 1;p.parentNode.insertBefore(e, p)
})(window, document, 'script', 'https://cdn.ownid.com/js/firebase-sdk.es5.js', 'ownid');
</script>

Initializing the OwnID SDK#

Every HTML page must initialize the OwnID SDK with the Server URL of an OwnID application. Because this application was integrated with your website's identity management system, defining the Server URL connects the widget to the system managing your website's users. To obtain your application's Server URL, open the application in the OwnID Console and go to the General tab. Once you have obtained the Server URL, place the following code in the head or body of your page. If it is inserted in the body, it must come before the code that creates the widget.

<script>
ownid('init', {serverUrl: 'https://eg78fsz8cx3MyURL.server.ownid.com/ownid'});
</script>

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 Server URL of an OwnID application, and creates the OwnID widget.

<body>
<!-- ... Your existing form ... -->
<form id="loginForm">
<input type="email" id="email">
<input type="password" id="password">
<button type="submit" id="submit">Login</button>
</form>
<script>
(function (w, d, s, u, o, e, p, a) {w[o] = w[o] || function () {
a=arguments,(w[o].q = w[o].q || []).push(a);'function'==typeof a[a.length - 1]&&a[a.length - 1](Promise.resolve())},
e = d.createElement(s), p = d.getElementsByTagName(s)[0];e.src = u;e.async = 1;p.parentNode.insertBefore(e, p)
})(window, document, 'script', 'https://cdn.ownid.com/js/firebase-sdk.es5.js', 'ownid');
// Initialize with the Server URL of your OwnID application
ownid('init', {serverUrl: 'https://eg78fsz8cx3MyURL.server.ownid.com/ownid'});
</script>
<script>
ownid('login', {
loginIdField: document.getElementById('email'),
passwordField: document.getElementById('password'),
submitButton: document.getElementById('submit'),
onSuccess: () => {
// Insert code that is executed after user logs in with OwnID
},
});
</script>
</body>

Registration Page#

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

<body>
<!-- ... Your existing form ... -->
<form id="registrationForm" onsubmit="onSubmit(); return false">
<input type="email" id="email" >
<input type="password" id="password" placeholder="Password" name="password">
<input type="password" id="confirm-password" placeholder="Confirm password" name="confirm-password">
<button type="submit">Submit</button>
</form>
<script>
(function (w, d, s, u, o, e, p, a) {w[o] = w[o] || function () {
a=arguments,(w[o].q = w[o].q || []).push(a);'function'==typeof a[a.length - 1]&&a[a.length - 1](Promise.resolve())},
e = d.createElement(s), p = d.getElementsByTagName(s)[0];e.src = u;e.async = 1;p.parentNode.insertBefore(e, p)
})(window, document, 'script', 'https://cdn.ownid.com/js/firebase-sdk.es5.js', 'ownid');
// Initialize with the Server URL of your OwnID application
ownid('init', {serverUrl: 'https://eg78fsz8cx3MyURL.server.ownid.com/ownid'});
</script>
<script>
ownid('register', {
passwordField: document.getElementById('password'),
confirmPasswordContainer: document.getElementById('confirm-password'),
loginIdField: document.getElementById('email')
});
</script>
</body>

Account Recovery Page#

The following code demonstrates how to use the OwnID SDK with a page that allows someone to use their phone to recover access to their account. Like a login or registration page, this code initializes the SDK with the Server URL of an OwnID application and creates the OwnID widget. But this account recovery page also includes a line of code that acts as a placeholder for the OwnID widget. The location of this placeholder determines where the widget appears on the page.

<body>
<script>
(function (w, d, s, u, o, e, p, a) {w[o] = w[o] || function () {
a=arguments,(w[o].q = w[o].q || []).push(a);'function'==typeof a[a.length - 1]&&a[a.length - 1](Promise.resolve())},
e = d.createElement(s), p = d.getElementsByTagName(s)[0];e.src = u;e.async = 1;p.parentNode.insertBefore(e, p)
})(window, document, 'script', 'https://cdn.ownid.com/js/firebase-sdk.es5.js', 'ownid');
// Initialize with the Server URL of your OwnID application
ownid('init', {serverUrl: 'https://eg78fsz8cx3MyURL.server.ownid.com/ownid'});
</script>
<!-- OwnID placeholder that controls where widget appears -->
<div id="ownidRecoveryWidget"></div>
<script>
ownid('recover', {
element: document.getElementById('ownidRecoveryWidget'),
onSuccess: () => {
// User successfully recovered access to their account using a phone
// Insert code e.g., show success message
}
});
</script>
</body>

Account Linking Page#

The link variation of the OwnID widget allows a user to add passwordless authentication to their existing account. This variation of the widget is usually added to a profile or account settings page.

The following code demonstrates how to use the OwnID SDK with a page that allows someone to use their phone to link their account with OwnID. Like a login or registration page, this code initializes the SDK with the Server URL of an OwnID application and creates the OwnID widget. But this account linking page also includes a line of code that acts as a placeholder for the OwnID widget. The location of this placeholder determines where the widget appears on the page.

<body>
<script>
(function (w, d, s, u, o, e, p, a) {w[o] = w[o] || function () {
a=arguments,(w[o].q = w[o].q || []).push(a);'function'==typeof a[a.length - 1]&&a[a.length - 1](Promise.resolve())},
e = d.createElement(s), p = d.getElementsByTagName(s)[0];e.src = u;e.async = 1;p.parentNode.insertBefore(e, p)
})(window, document, 'script', 'https://cdn.ownid.com/js/firebase-sdk.es5.js', 'ownid');
// Initialize with the Server URL of your OwnID application
ownid('init', {serverUrl: 'https://eg78fsz8cx3MyURL.server.ownid.com/ownid'});
</script>
<!-- ... Insert HTML ... -->
<!-- OwnID placeholder that controls where widget appears -->
<div id="ownidLinkingWidget"></div>
<script>
ownid('isOwnidUser', (isOwnidUser) => {
if (!isOwnidUser) {
ownid('link', {
element: document.getElementById('ownidLinkingWidget'),
onSuccess: () => {
// User successfully linked their existing account using a phone
// Insert code e.g., show success message
}
});
return;
}
});
</script>
</body>