Delayed verification

With delayed verification, you can give users a glimpse of OpenPass benefits before they verify their accounts. For example, you can offer exclusive content to unverified users for a limited time, while providing verified users with ongoing access to that content, along with additional experiences.

NOTE: This feature is supported for all sign-in types in the JavaScript SDK, except for web TV.

Here's what you need to know about delayed verification:

• The user has up to 7 days to verify their email address. If they do not, they must use a one-time password (OTP) for verification during their next login.
• Each user can only use delayed verification once. After that, verification is required before access.
• You can identify unverified users through the email_verified claim, which is set to false in the associated ID token and user information response.
• If the user clicks the magic link in a different browser, they must click Verify Now on an additional screen to confirm verification.

IMPORTANT: By enabling this feature, you acknowledge the risks associated with this feature and agree with the following for your application or site: it will not grant any high privileges to users with unverified email addresses, such as posting comments or subscribing to a service or newsletter. It must also integrate with the standard OIDC experience with OpenPass to recognize a verified magic-link user upgrading to a regular OpenPass user.

To enable delayed verification in your site, do the following:

1. Turn on the Enable Magic Link Verification option for your application or site in the OpenPass Account Management portal.
2. In the authorization call, set the property for allowing unverified email addresses to true. The specific property name depends on the feature you are implementing. For example, if you are using the Sign In with OpenPass button, the property is named allowUnverifiedEmail.

When implemented, if the user’s email address is not verified, and the authorization call is made with the property for allowing unverified email addresses set to false, an OTP is sent to the user as part of the fallback to the standard verification process. The following are code examples for implementing delayed verification, each featuring the property for allowing unverified email addresses.

Customizable "Sign In with OpenPass" button

The following code example adds delayed verification to the Sign In with OpenPass button. To learn more about implementing this button, see the Customizable "Sign In with OpenPass" button quickstart guide.

penpassClient.signInWithRedirect({
    redirectUrl: window.location.origin + "/redirect-callback",
    allowUnverifiedEmail: true,
}); 

Co-branding inline sign-in form

The following code example adds delayed verification to the co-branding inline sign-in form. To learn more about implementing this form, see the Co-branding inline sign-in form quickstart guide.

const inlineSignInOptions = {
    redirectUrl: `${window.location.origin}/redirect-callback`,
    parentContainerElementId: "inline-sign-in",
    authenticationMode: "redirect",
    signinButtonTextOption: "continue",
    customQueryParameters,
    allowUnverifiedEmail: true,
};

QuickAuth sign-in form

The following code example adds delayed verification to the QuickAuth sign-in form. To learn more about implementing this form, see the QuickAuth sign-in form quickstart guide.

<div id="openpass-quick-auth" 
    data-openpass-quick-auth-client-id="{{CLIENT_ID}}"
    data-openpass-quick-auth-redirect-uri="{{REDIRECT_URI}}" 
    data-openpass-quick-auth-visibility="displayOnInit"
    data-openpass-quick-auth-mode="redirect" 
    data-openpass-quick-auth-sso-base-uri="{{SSO_URL}}"
    data-openpass-allow-unverified-email="true">
</div>

Custom sign-in button (add a click handler)

The following code example adds delayed verification to your own sign-in button. To learn more about implementing this button, see the Custom sign-in button (add a click handler) quickstart guide.

<div class="card mt-3 mb-5">
    <div class="card-header">Sign-in with OpenPass button / HTML / Redirect</div>
    <div class="card-body">
        <p class="card-text">The button below was automatically generated using the Sign-In with OpenPass button HTML API</p>
        {{> testing-app-info}}
        <div id="sign-in-with-openpass-button" 
            data-mode="redirect" 
            data-sso-base-uri="{{SSO_URL}}"
            data-client-id="{{CLIENT_ID}}" 
            data-redirect-uri="{{REDIRECT_URI}}" 
            data-text="signin_with"
            data-size="large" 
            data-allow-unverified-email="true">
        </div>
    </div>
</div>