Account Recovery automates the process of re-authenticating users who forgot or had an issue with their password or existing device.

​
Prerequisites

To get the most out of this guide, make sure to do the following tasks first:

  1. Complete the backend integrations (see Build Server-Side Endpoints).
  2. Complete the Login integration (see Login).
Widget Figure 1. After integration (example)

The instructions on this page assume you have already installed and referenced the OwnID SDK as described in Steps 1 and 2 of Login.

​
Integrating Account Recovery

Implement the account recovery event handlers, and OwnID integration on the desired page.

​
Add the Widget to your Registration Form

The SDK recover method is used to integrate with the account recovery journey. It references the field Ids in your existing recovery form. It also renders the OwnId widget automatically referencing your field Ids to calculate its position in the DOM.

The sample recover forms in the snippets below are vanilla examples, shown here only to confirm the implementation pattern of form fields in SDK methods.

​
Implement the recover Method

In the ownid method:

  1. Enter “recover” for the method name.

  2. Assign the form field (as a DOM element) you use as the login id to the loginIdField parameter.

  3. Assign the the same field (as a DOM element) you use as the login id to the targetIdField parameter.

  4. Assign an error function as desired in the onError parameter.

  5. Configure the onLogin event to copy the data.token object locally. The data.token is the value generated by the getSessionByLoginId endpoint and you should use it to set a user session or exchange it for a session token.

Session identifier can be ANY data Object

As noted in the Login integration, the session identifier can be any unique data object, even though we’re calling it a ‘token’. We only pass it right back to you so you’re able to associate a request with an active session.

  1. Redirect the user to the appropriate landing page at your discretion.

Use the code snippets below, and check the embedded comments, to model your implementation of the submit handler and the SDK recover method.

<body>
    <form name="myForm">
        <input id="email" type="text" name="email">
        <input type="submit" value="Request Password Reset">
    </form>
    <script>
        ownid('recover', {
            loginIdField: document.getElementById('email'),
            targetField: document.getElementById('email'),
            widgetPosition: 'end',
            addOrStatement: false,
            onError: (event) => console.log('onError', event),
            onLogin: function (data) {
                // Generic example on how to set a session and redirect the user (use your own!)
                // 1. set user session using data.token (usually a jwt or session token), generated in your backend and sent through the OwnID server
                localStorage.setItem('sessionID', JSON.stringify({ token: data.token }));
                // 2. redirect the user to your entry point 
                window.location.href = '/landingpage';
            }
        });
    </script>
</body>

That’s it!

You’ve implemented the frontend functionality required for the user to recover their account.

If you’re ready to deploy your integration, make sure to read the Pre-Deployment Checklist before hand!

Select an option below to get to the right place.

​
Next Steps

​
Ready to deploy?

YES!

Take me to the Deployment Checklist

NOT YET...

I want to build another user journey

Was this page helpful?

RegistrationOne-Tap Sign-In