Skip to main content

React - Components

Note

This section assume you know at least basics of React Components

Cryptr Components

Our React SDK is here to let you manage end-user session easily. The cryptr components are obviously simply related to user session management, but see below them and their purpose

List of Components

  • SignInButton ↔ Button to perform Cryptr sign in process
  • SignUpButton ↔ Button to perform Cryptr sign up process
  • LogOutButton ↔ Button to perform Cryptr log out process
  • AccountButton ↔ Button/widget to access User Access space

Session Buttons

The session buttons are SignInButton, SignUpButton and LogOutButton

Common props

Session buttons have some Props in common.

text STRING

text displayed inside generated button

autoHide BOOLEAN

Default true

If true signin and signup button only shows when active session and logout shows up when session active.

Set to false if you want your button to always be displayed

className STRING

The className you want for your button

style CSSProperties

The style you want for your button

note

className and style are default props for React component

Specific props

1. Text prop

Session Buttondefault prop value
SignInButton"Sign in"
SignUpButton"Sign up"
LogOutButton"Log out"

2. Scopes prop

Cryptr products are oAuth 2.0 Compliant, so we provide a customization for our components.

Each session created ( through sign in or sign out) must include a scopes prop

If you want to learn more about scope see following RFC 6749 Section 3.3

For SignInButton and SignUpButton

scopes* STRING

List of scopes you want for the end-user session joined by a whitespace .

We encourage to use value email profile openid

3. LogOutButton callback prop

After logout process of your end user you may want to do your own actions. That's why we let you give your callback as prop. callback prop is part of LogOutButton and should be a Function

Account Access Button/Widget

Purpose

Your end-user may want to manage current devices and accesses allowed to interact with your app. That's why we built the AccountButton which can be just a button or a nicer widget! This component access to a cryptr page for two end-user features

  1. Showing/Removing devices that have access to your app
  2. Managing multi-factor authentication (SMS & Mail)

Props

isWidget BOOLEAN

Default true

If true -> shows a sign button (default SignInButton) when no active session and show a collapsing widget when active session If false -> shows a sign button when no active session and show a button to access directly to end-user account Cryptr page.

text BOOLEAN

Default "My account"

String used for the button to access directly to end-user account Cryptr page

className STRING

The className you want for your button

style CSSProperties

The style you want for your button

children Html Element

(when isWidget set to false)

The block you want in the collapsing block of the widget, between user card and logout button. This could be a list of links that allow user to access specific pages of your app

tenantName STRING

(when isWidget set to false)

The text you want to be displayed in the toggle button when session is active

tenantLogo STRING

(when isWidget set to false)

The Logo you want alongside your tenantLogo when session is active

defaultSignType STRING ["signin", "signup"]

The type of sign button you want when no active session

defaultSignText STRING

The text of the sign button you want when no active session

Button style

(when isWidget set to false)

The component will render as a simple html button with optional props you'll give to it (text, style and className). The rendered button will only react to onClick event. The browser will prompt a new popup (new tab on mobile devices) to let end-user manage his account (see Purpose)

If the access of the current device/browser is revoked by end-user through this action. He will be log out from the session and the pop-up/tab will be closed.

Widget style

(by default or if isWidget set to true)

The component will be rendered as a widget composed of two blocks:

  • a clickable button that toggles the following element
  • a dropdown block with following items (from top to bottom)
    • user information such as email, fullName, and initials (if fullname unknown it's buildt from email)
    • button access to user account access
    • a customizable block (children prop) that you can implement as you want. We suggest listing some Link elements to let user access some specific paths
    • logout button

Integration examples

caution

The parent component (named arbitrarily SubComponent below) must be a child of Cryptr Provider Component ! Refer to previous section to read it if you haven't already

SubComponent example

SubComponent.tsx
import React from 'react'
import { /* Put here your Cryptr Component imports */ } from '@cryptr/cryptr-react'

const SubComponent: React.FC = () => {
return (
<div className="sub-component">
// Write here the component implementations
</div>
)
}

export default SubComponent

SignInButton examples

signin sample example
<SignInButton scopes="email profile openid"/>
signin with chosen text example
<SignInButton 
text="My sign in button"
scopes="email profile openid"
/>
signin autoHide false example
<SignInButton 
autoHide={false} //The component will allways be displayed
scopes="email profile openid"
/>
signin styled example
<SignInButton 
style={youStyle} //The button will use this style
className={youStyle} //The button will use these classes
scopes="email profile openid"
/>

SignUpButton examples

signup sample example
<SignUpButton scopes="email profile openid"/>
signup with chosen text example
<SignUpButton 
text="My sign in button"
scopes="email profile openid"
/>
signup autoHide false example
<SignUpButton 
autoHide={false} //The component will allways be displayed
scopes="email profile openid"
/>
signup styled example
<SignUpButton 
style={youStyle} //The button will use this style
className={youStyle} //The button will use these classes
scopes="email profile openid"
/>

LogOutButton examples

logout sample example
<LogOutButton callback={() => {console.log("logged out")}}/>
logout with chosen text example
<LogOutButton 
text="My log out button"
callback={() => {console.log("logged out")}}
/>
logout autoHide false example
<LogOutButton 
callback={() => {console.log("logged out")}}
autoHide={false} //The component will allways be displayed
/>
logout styled example
<LogOutButton 
style={youStyle} //The button will use this style
className={youStyle} //The button will use these classes
callback={() => {console.log("logged out")}}
/>

AccountButton examples

account button button style
<AccountButton isWidget={false}>
account button button style with text
<AccountButton 
text="My account button"
isWidget={false}
>
account button widget style sample
<AccountButton/> // you can force if you want with `isWidget={true}`
account button widget style with children sample
<AccountButton>
<div>
<Link to="/user-path-1">Path 1</Link>
<Link to="/user-path-2">Path 2</Link>
</div>
</AccountButton>
account button widget style with customized tenantName and tenantLogo
<AccountButton
tenantName="My tenant Name"
tenantLogo="http://path/to/tenant/logo"
>

What's next ?

You want to use hooks to retrieve authenticated state, user content or make sure your resource server requests are properly set ? Go to the next article to read more.