https://github.com/mikeldking/react-auth0-context

React Context and Hook for Auth0 Authentication
https://github.com/mikeldking/react-auth0-context

auth0 hooks react typescript

Last synced: 3 months ago
JSON representation

React Context and Hook for Auth0 Authentication

• Host: GitHub
• URL: https://github.com/mikeldking/react-auth0-context
• Owner: mikeldking
• Created: 2020-04-30T03:35:43.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T04:38:52.000Z (about 2 years ago)
• Last Synced: 2024-10-08T06:07:57.725Z (4 months ago)
• Topics: auth0, hooks, react, typescript
• Language: TypeScript
• Size: 2.65 MB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 19
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-auth0-context

React context and hook for Auth0 Authentication using `@auth0/auth0-spa-js`

## Install

```

yarn add react-auth0-context

```

## Setup

Add the AuthProvider at the root of your React app and pass in your Auth0 application info and API identifier (audience)

```typescript

import { AuthProvider } from "react-auth0-context";

ReactDOM.render(

  

    

      

    

  ,

  document.getElementById("root")

);

```

Add a way to log in

```typescript

import { useAuth } from "react-auth0-context";

const LoginButton = () => {

  const { isAuthenticated, loginWithRedirect, logout } = useAuth();

  return (

     {

        if (isAuthenticated) {

          logout();

        } else {

          loginWithRedirect({

            redirect_uri: window.location.origin,

          });

        }

      }}

    >

      {isAuthenticated ? "Log Out" : "Log In"}

    

  );

};

```

Use the `useAuth` hook to get user info and authentication tokens to talk to your API

```typescript

const { user, getTokenSilently } = useAuth();

async function makeAuthenticatedAPIRequest() {

  const token = await getTokenSilently();

  const response = await fetch(url, {

    headers: {

      "Content-Type": "application/json",

      Authentication: `Bearer ${token}`,

    },

    body: data,

  });

  return response.json();

}

```

## How to use with Routing

If you are using something like React Router, you can use `useAuth` to create a private toute

```typescript

import React, { useEffect } from "react";

import { Route, RouteProps } from "react-router-dom";

import { useAuth } from "react-auth0-context";

import { Location } from "history";

interface IPrivateRouteProps extends RouteProps {

  // tslint:disable-next-line:no-any

  component: any;

}

function locationToString(location: Location) {

  const { pathname, search } = location;

  let str = pathname;

  if (search) {

    str += search;

  }

  return str;

}

const PrivateRoute: React.FunctionComponent = (

  routeProps

) => {

  const { component: Component, path, ...rest } = routeProps;

  const { isAuthenticated, loginWithRedirect } = useAuth();

  useEffect(() => {

    const loginFn = async () => {

      if (!isAuthenticated) {

        const targetUrl =

          routeProps.location && locationToString(routeProps.location);

        await loginWithRedirect({

          redirect_uri: window.location.origin,

          appState: { targetUrl },

        });

      }

    };

    loginFn();

    /* eslint-disable-next-line react-hooks/exhaustive-deps */

  }, [isAuthenticated, loginWithRedirect, path]);

  return isAuthenticated ? (

     } {...rest} />

  ) : null;

};

export default PrivateRoute;

```