@crossid/crossid-react

OAuth2 for React.js, using the authorization code flow with PKCE extension.

Get Started

Install by:

npm:

npm install @crossid/crossid-react

yarn:

yarn add @crossid/crossid-react

Wrap your app in AuthProvider:

import { AuthProvider} from '@crossid/crossid-react'
<AuthProvider
    tenant_id="<tenant>"
    region="us"
    client_id="<client_id>"
    redirect_uri={`${window.location.origin}/`}
    post_logout_redirect_uri={`${window.location.origin}/`}
>
    <App />
</AuthProvider>,

Put a login & logout buttons anywhere in your app:

const { idToken, loginWithRedirect, logoutWithRedirect } = useAuth()

return (
  <div>
    {!idToken && (
      <button type="button" onClick={() => signupWithRedirect({ state: { return_to: '/home' } })}>
        Signup
      </button>
    )}
    {!idToken && (
      <button
        type="button"
        onClick={() => {
          loginWithRedirect({ state: { return_to: '/home' } })
        }}
      >
        Sign In
      </button>
    )}
    {idToken && (
      <button
        type="button"
        onClick={() => {
          logoutWithRedirect({ state: { return_to: '/goodbye' } })
        }}
      >
        Sign Out
      </button>
    )}
  </div>
)

On any component, pass token to access protected endpoint by:

const { getAccessToken } = useAuthActions()

const [data, setData] = useState()
useEffect(() => {
  async function fetchData() {
    const tok = await getAccessToken()
    const resp = await fetch(`/api`, {
      headers: { Authorization: `Bearer ${tok}` },
    }).json()
    setData(resp)
})

See playground/index.html

Documentation

• Example Repo
• API Reference

Bugs and feature requests

Have a bug, feature request or feedback? Please first search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

Contributing

The main purpose of this repository is to continue evolving crossid-react, making it more secure and easier to use. Development of this library happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving crossid-react.

Reporting a Vulnerability

The Crossid team takes security issues very seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.

To report a security issue, email [email protected].

We'll endeavor to respond quickly, and will keep you updated throughout the process.

What is Crossid?

Crossid can:

• Sign users in using various passwordless authentication factors (e.g., otp, fingerprint, etc...)
• Sign users in via social providers (e,g. Facebook) or enterprise providers (e.g., Azure)
• Multi factor authentication.
• Issue signed OAuth2 and Openid-Connect access tokens to protect API calls.
• Manage user profiles and access.
• Services authentication.

License

This project is licensed under the MIT license.