React

This guide shows you how to use Criipto Verify in a React single page application. Read the full documentation or download a sample application from GitHub.

​

App switch support

@criipto/verify-react supports app switching for Swedish BankID and Danish MitID by a best-effort mobile-os detection and setting the relevant Criipto Verify login hints.

​

Installation

Using npm

npm install @criipto/verify-react

​

Setup SDK

Setup the Criipto Verify SDK by wrapping your application in CriiptoVerifyProvider:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { CriiptoVerifyProvider } from '@criipto/verify-react';

import App from './App';

ReactDOM.render(
  <CriiptoVerifyProvider
    domain="{{YOUR_CRIIPTO_DOMAIN}}"
    clientID="{{YOUR_CLIENT_ID}}"
    redirectUri={window.location.href}
  >
    <App />
  </CriiptoVerifyProvider>,
  document.getElementById('root')
);

​

Trigger login with redirect

For a simple redirect based login you can use the loginWithRedirect option via useCriiptoVerify.

// src/App.js
import React from 'react';
import { useCriiptoVerify } from '@criipto/verify-react';

export default function App() {
  const {result, loginWithRedirect} = useCriiptoVerify();

  if (result?.id_token) {
    return (
      <pre>
        {JSON.stringify(result.id_token, null, 2)}
      </pre>
    )
  }

  return (
    <React.Fragment>
      {result?.error ? (
        <p>
          An error occurred: {result.error} ({result.error_description}). Please try again:
        </p>
      ) : null}
      <button onClick={() => loginWithRedirect()}>Login</button>
    </React.Fragment>
  );
}

​

Render login options

If you support multiple eIDs and wish to render login options in your app you can do so with the AuthMethodSelector component:

// src/App.js
import React from 'react';
import { useCriiptoVerify, AuthMethodSelector } from '@criipto/verify-react';

export default function App() {
  const {result} = useCriiptoVerify();

  if (result?.id_token) {
    return (
      <pre>
        {JSON.stringify(result.id_token, null, 2)}
      </pre>
    )
  }

  return (
    <React.Fragment>
      {result?.error ? (
        <p>
          An error occurred: {result.error} ({result.error_description}). Please try again:
        </p>
      ) : null}
      <AuthMethodSelector />
    </React.Fragment>
  );
}

​

Sessions

If you want to use @criipto/verify-react for session management (rather than one-off authentication) you can configure a sessionStore:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { CriiptoVerifyProvider } from '@criipto/verify-react';

import App from './App';

ReactDOM.render(
  <CriiptoVerifyProvider
    domain="{{YOUR_CRIIPTO_DOMAIN}}"
    clientID="{{YOUR_CLIENT_ID}}"
    redirectUri={window.location.href}
    sessionStore={window.sessionStorage} // or window.localStorage
  >
    <App />
  </CriiptoVerifyProvider>,
  document.getElementById('root')
);

When a sessionStore is configured the library will store the id_token your chosen storage (sessionStorage or localStorage) and invalidate the token once it expires.

The library will also attempt to retrieve a user token on page load via SSO (if your criipto domain has SSO enabled).

You may wish to increase the "Token lifetime" setting of your Criipto Application.

// src/App.js
import React from 'react';
import { useCriiptoVerify, AuthMethodSelector } from '@criipto/verify-react';

export default function App() {
  const {claims, error, isLoading} = useCriiptoVerify();

  if (isLoading) {
    return <div>Loading</div>
  }

  if (claims) {
    return (
      <pre>
        {JSON.stringify(claims, null, 2)}
      </pre>
    )
  }

  return (
    <React.Fragment>
      {error ? (
        <p>
          An error occurred: {error.error} ({error.error_description}). Please try again:
        </p>
      ) : null}
      <AuthMethodSelector />
    </React.Fragment>
  );
}