https://github.com/scarmuega/react-use-auth0

Auth0 React integration using context and hooks
https://github.com/scarmuega/react-use-auth0

auth0 react react-hooks

Last synced: 4 months ago
JSON representation

Auth0 React integration using context and hooks

• Host: GitHub
• URL: https://github.com/scarmuega/react-use-auth0
• Owner: scarmuega
• License: mit
• Created: 2019-06-14T12:11:51.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T03:55:39.000Z (almost 2 years ago)
• Last Synced: 2024-10-01T14:57:08.142Z (4 months ago)
• Topics: auth0, react, react-hooks
• Language: TypeScript
• Size: 678 KB
• Stars: 3
• Watchers: 0
• Forks: 1
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
useAuth0

========

This library hides all the boilerplate code required to authenticate a React SPA using Auth0. Most of the code is borrowed from the [official Auth0 tutorial](https://auth0.com/docs/quickstart/spa/react/01-login), but also adds some nice-to-have utilities for common use-cases.

Installation

------------

to install the library, do as usual:

```

npm install --save react-use-auth0

```

Usage

-----

As the name implies, it uses react hooks. Here's a snippet of how to use the `useAuth0` and the `Auth0Setup` HoC that provides the context for the children:

```tsx

import React from "react";

import * as ReactDOM from "react-dom";

import { Auth0Setup, useAuth0, useAuth0Token, useAuth0User } from "../index";

function PrivateData() {

    const user = useAuth0User();

    const token = useAuth0Token();

    return (

        


            {user.result && your user is: {JSON.stringify(user.result)}}

            {token.result &&  console.log(token.result)}>log token}

        

    );

}


function LogoutButton() {

    const auth = useAuth0();

    return  auth.logout()}>Logout

}

function LoginButton() {

    const auth = useAuth0();

    return  auth.loginWithRedirect({ appState: { button: "button_1" } })}>Login

}

function App() {

    const auth = useAuth0();

    return (

        <>

            {auth.isAuthenticated && }

            {!auth.isAuthenticated ?  : }

        >

    );

}

// A function that routes the user to the right place

// after login

const onRedirectCallback = (appState: any) => {

    window.history.replaceState({}, document.title, window.location.pathname);

    const button = appState && appState.button;

    console.log(`logged in from button: ${button}`);

};

ReactDOM.render(

    

        

    ,

    document.getElementById("root")

);

```

Demo 

-----

You can find a very basic example in the `/demo` folder. To run it, first change your tenant and client id inside `demo.tsx` and then start the server by running `npm run start`