DEPRECATED - only to be used with Javascript SDK 1.x.x. For javascript SDK 2.x.x please see this guide in how to authenticate the client: https://github.com/cognitedata/cognitesdk-js/blob/v1/guides/authentication.md

Cognite React Auth

The Cognite React Auth makes it easy to integrate Cognite's login flow into any React applications.

You need to use the Cognite JavaScript SDK with this module.

Installation

Install the package with yarn:

yarn add @cognite/react-auth

or npm

npm install @cognite/react-auth --save

Getting Started

Import ReactAuthProvider:

import { ReactAuthProvider } from '@cognite/react-auth';

Wrap your application with ReactAuthProvider:

<ReactAuthProvider
  project={PROJECT_NAME}
  redirectUrl={window.location.href}
  errorRedirectUrl={window.location.href}
>
  <AuthenticatedComponent />
</ReactAuthProvider>

To persist authorization token in the local storage add enableTokenCaching prop:

<ReactAuthProvider
  project={PROJECT_NAME}
  enableTokenCaching
  ...

If your app uses a routing library, you can provide routes for successful authorization in redirectUrl prop and for failed in errorRedirectUrl prop:

<ReactAuthProvider
  project={PROJECT_NAME}
  redirectUrl="/authenticated_route"
  errorRedirectUrl="/login_error_route"
  ...

See the example on how to use this module.

Popup Login

If you need to preserve the state of your react app during authorization, you can use "popup" login that opens a new tab in the browser. To do that add usePopup prop:

<ReactAuthProvider
  project={PROJECT_NAME}
  redirectUrl={window.location.href}
  errorRedirectUrl={window.location.href}
  usePopup
>
  <AuthenticatedComponent />
</ReactAuthProvider>

NOTE: With "popup" login it's very important to use ReactAuthProvider on the top level of your application without any condition, even though the project is undefined or empty, ReactAuthProvider should be rendered. It's necessary in order the app that runs in the popup window after authorization will render ReactAuthProvider component and the component will close the popup window. See the example

Login Renderer

There is an optional prop loginRenderer that can be used as fallback render in case of project prop is either undefined or empty:

<ReactAuthProvider
  project={PROJECT_NAME}
  redirectUrl={window.location.href}
  errorRedirectUrl={window.location.href}
  usePopup
  loginRenderer={<ProjectSelector onProjectSelected={this.onProjectSelected} />}
>
  <AuthenticatedComponent />
</ReactAuthProvider>

See the example

Using Typescript

The SDK is written in native typescript, so no extra types needs to be defined.

Documentation

• Cognite SDK
• API documentation

License

Apache 2.0

Release

How to release a new version:

1. Create a new branch
2. Commit changes (if any)
3. Run

   $ npm version [patch/minor/major]

4. Push branch and push tags (git push --tags)
5. Create a new pull requests
6. A new version will be published when PR is merged