@cognite/react-auth
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.4 • Public • Published

    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 logo

    Cognite React Auth

    Build Status

    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

    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

    Install

    npm i @cognite/react-auth

    DownloadsWeekly Downloads

    14

    Version

    2.2.4

    License

    Apache-2.0

    Unpacked Size

    36.1 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar