Skip to main content

React - Installation

Package installation

Add @cryptr/cryptr-react dependency to your project using one of below commands

npm install @cryptr/cryptr-react

Cryptr Provider

In our plugin, we have a component named CryptrProvider which

  • Must be as root level as possible
  • Allows you to manage end-user cryptr session state
  • Handle session events from outside browser
  • needs the configuration we provided to you.

Implement Provider

you can import it from @cryptr/cryptr-react

example:

App.tsx
import React from 'react'
// ...
import { CryptrProvider } from '@cryptr/cryptr-react'

const App = () => {
//any stuf you need

return (
<CryptrProvider {...config}>
<div className="App">
{/* Here is your code*/}
</div>
</CryptrProvider>
)
}

export default App

Configuration object

The configuration object is a Key-value object as an example shown below. It's skeleton is provided during your onboarding process.

If we did not provide your specific configuration or if you have questions , contact us

config
const cryptrConfig = {
audience: "YOUR_AUDIENCE_URL",
client_id: "YOUR_CRYPTR_APP_ID",
cryptr_base_url: "CRYPTR_BASE_URL",
default_locale: "YOUR_LOCALE",
default_redirect_uri: "YOUR_REDIRECT_URI",
region: YOUR_CRYPTR_REGION,
tenant_domain: "YOUR_TENANT_DOMAIN",
}

Required Parameters

audience* STRING

Your Application Origin URL that will be use in authentication process. If wrong your end-user process will fail

client_id* STRING(UUID)

Your Cryptr React App ID

cryptr_base_url* STRING

The Cryptr instance server URL. ex https://auth.cryptr.eu 💡 Can be not set if you fill region parameter

tenant_domain* STRING

The domain targetted for this Angular application integration

Optional Parameters

default_locale STRING ['en', 'fr']

Default en

The default locale used to localize our components and used to define locale used on our cryptr screens

default_redirect_uri STRING

Default window.location.origin

The URI where you want to be redirected after cryptr screens.

⚠️ With static sites if you choose to redirect to a path, if your architecture do not handle this, your redirection will fail.

onRedirectCallback Function

Default window.history.replaceState({}, document.title, window.location.pathname)

Process that you want to trigger at the end of authentication process, by default we'll clean up url from query parameters that are not usefull anymore.

onLogOutCallback Function

Default window.location.reload()

This function will be called after log out process

defaultScopes STRING

Default "email profile openid"

This value will be used for SignInButton and SignUpButton if you do not provide specific ones. Also used for AccountButton in widget style if no session active

What next ?

In the next article we will spoke about components included in the SDK, their properties and behaviour