📚 @cryptr/cryptr-react

> Cryptr SDK for React Single Page Applications using authentication (SSO, Magic link, password ... )

See Online documentation

Table of Content

- 📚 @cryptr/cryptr-react
- Table of Content
- Installation
- Configuration
- CryptrConfig
- Cryptr Provider
- Cryptr Hook useCryptr
- Components
- SignInWithDomainButton
- SignInWithEmailButton
- Deprecations

Installation

Current version 2.0.1

``bash
//npm
npm install @cryptr/cryptr-react

//npm
yarn add @cryptr/cryptr-react
`

Configuration

$3

Here is an example of a configuration that will be necessary to implement our solution

`javascript
const config = {
audience: process.env.REACT_APP_CRYPTR_AUDIENCE,
cryptr_base_url: process.env.REACT_APP_CRYPTR_BASE_URL,
tenant_domain: process.env.REACT_APP_CRYPTR_TENANT_DOMAIN,
client_id: process.env.REACT_APP_CRYPTR_CLIENT_ID,
default_redirect_uri: process.env.REACT_APP_CRYPTR_DEFAULT_REDIRECT_URI,
dedicated_server: process.env.REACT_APP_CRYPTR_DEDICATED_SERVER == 'true',
default_slo_after_revoke: process.env.REACT_APP_CRYPTR_DEFAULT_SLO_AFTER_REVOKE == 'true',
}
`

Explanation of config

| key | Required/Optional | type | Default | Description |
| -------------------------- | ------------------------- | ----------- | ------- | ---------------------------------------------------- |
| tenant_domain | required | string slug | - | Reference to your company entity |
| client_id | required | uuid | - | Reference to your front app id |
| audience | required | string URL | - | Root URL of your front app |
| default_redirect_uri | required | string URL | - | Desired redirection URL after authentication process |
| cryptr_base_url | required | string URL | - | URL of your Cryptr service |
| default_slo_after_revoke | required(since 1.2.0) | boolean | | Defines if SLO has to be done on SSO logout process |
| dedicated_server | Optional | boolean | false | Contact Cryptr Team to set properly |

⚠️ fixed_pkce has been removed in the 1.4.0 release version

$3

After creating your config, create your CryptrProvider that should encapsulate your App content.

Here is a quick sample (also see our sample (src/examples/App.tsx))

`typescript
import React, { ReactElement } from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'

// import from cryptr SDK
import { CryptrProvider } from '@cryptr/cryptr-react'

const config = {/... your config /}

const AppContainer = (): ReactElement => {
return (

// your routes

)
}

const App = (): ReactElement => {



}

return default App
`

Then you will be able to handle Cryptr session through our hook and our components

Cryptr Hook useCryptr

On any React element child of the CryptrProvider you'll be able to use our hook useCryptr for your Cryptr usage.

Here is a quick example

`typescript
import React, { ReactElement } from 'react'
import { useCryptr } from '@cryptr/cryptr-react'

const MyComponent = (): ReactElement => {
const { isAuthenticated, isLoading } = useCryptr()

if (isLoading) {
return Cryptr is processing authentication
}

if (isAuthenticated()) {
return A Cryptr session is live
} else {
return User is not authenticated
}
}

export default MyComponent
`

Here is a quick list of tools from our hook

| Name | Purpose |
| --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| isLoading | Cryptr SDK is currently looking for a active authentication (after login or refresh) |
| isAuthenticated | Cryptr SDK has a live Access token ➡️ a user is logged in |
| user | Returns the user objecgt containing all keys from Cryptr ID Token |
| logOut | Asks to Cryptr SDK to run the session log out process |
| decoratedRequest(axiosConfig: AxiosRequestConfig) | This method based on axios will decorate the request to the desired endpoint with the current Access Token as Authorization Bearer Header |

There are more but the major features are just above

Components

We embedded some components in this SDK to help your integration. Mainly it's button components and can still be configured as you wish (eg: text, className, style ...)

$3

_When you either know which is the entity of the user trying to connect or if you prefer to let him type his email on our gateway_

`typescript
import React, { ReactElement } from 'react'
import { SignInWithDomainButton } from '@cryptr/cryptr-react'

const LoginComponent = (): ReactElement => {
return
}

export default LoginComponent
`

> 💡 domain is optional if you do not know current user's context

$3

_When you already asked the user his email address_

`typescript
import React, { ReactElement } from 'react'
import { SignInWithEmailButton } from '@cryptr/cryptr-react'

const LoginComponent = (): ReactElement => {
return
}

export default LoginComponent
`

Deprecations

Some legacy items have been deleted since 1.3.0`. If you need some support for migration contact us