Client-side JS Authentication

Security starts with identity. You claim you’re Alice, but the Virtru SDK doesn’t know that. We can’t protect or access data without an identity that’s responsible for protecting or accessing that data. Otherwise, no one (or anyone) would be able to do whatever they want with your data. But we all have sensitive data to protect.

So how do you prove your identity to the Virtru SDK? We’re glad you asked, “Alice…”

Here are your options in web browsers and mobile apps:

  1. Drop in the Auth Widget to make SDK calls and show UI
  2. Send and confirm email codes via SDK calls and custom UI
  3. Use Federated Authentication via SDK calls and custom UI

These options are mutually exclusive from server-side Node.js Authentication.

Auth Widget

The Virtru auth widget is the fastest way to add authentication. We recommend it if you’re getting started with the Client-side JavaScript SDK. It includes the other client-side authentication options—email codes and federated authentication.

Virtru provides an auth widget with all client-side authentication calls and standard UI from Virtru’s products. You only have to specify an HTML element to render the widget and a callback for whatever needs to happen after users authenticate.

<html>
  <head>
    <title>Auth - Virtru SDK for JavaScript - Sample Application</title>
    <link
      href="https://sdk.virtru.com/js/latest/auth-widget/index.css"
      rel="stylesheet"
    />
    <script src="https://sdk.virtru.com/js/latest/auth-widget/index.js"></script>
    <script src="https://sdk.virtru.com/js/2.1.0/virtru-sdk.min.js"></script>
  </head>
  <body>
    <div id="virtru-auth-widget-mount"></div>
    <script>
      function afterAuth(email) {
        alert(`Hello, ${email}. You're ready to protect with Virtru!`);
      }

      // Set up Virtru auth widget
      Virtru.AuthWidget("virtru-auth-widget-mount", { afterAuth });
    </script>
  </body>
</html>

Email Codes

Email codes are alphanumeric codes that prove your identity for a short session. Codes expire in 15 minutes.

The Virtru SDK lets you send email codes to [email protected]:

Virtru.Auth.sendCodeToEmail({ email: "[email protected]" });

You would then check [email protected]’s inbox and copy the code from the Virtru email. And submit that code back to the SDK:

Virtru.Auth.activateEmailCode({
  email: "[email protected]",
  code: "V-12345678"
});

If the code submitted matches the code sent, the Virtru JavaScript SDK remembers your authentication status. You can confirm that by checking:

Virtru.Auth.isLoggedIn();

Federated Authentication

Federated Authentication is a good option for users to authenticate faster with OAuth providers (e.g. Google, Office 365, or Outlook). You’ll need to whitelist your domain for this option. You can test this option locally with the local.virtru.com domain like so:

echo "127.0.0.1       local.virtru.com  # Local Virtru SDK testing" >> /etc/hosts

Once your domain is white listed, you can call methods like loginWithGoogle to let Google handle the authentication:

Virtru.Auth.loginWithGoogle({ email: "[email protected]" });

This call goes to the Virtru Platform. If your domain is not whitelisted, this call will fail. If your domain is white listed, it will ask you to log in with Google.

Whichever email address you authenticate with Google (e.g. [email protected] or [email protected]) will be sent back to the Virtru Platform and authenticated for future Virtru JavaScript SDK calls. The Platform will redirect you back to your app.

Checking authentication status

How can you check if a user authenticated? This should work for any of the authentication methods above.

Virtru.Auth.isLoggedIn();

Did this page help you?