Skip to content

Commit

Permalink
adding usage example
Browse files Browse the repository at this point in the history
  • Loading branch information
caiokf committed Dec 9, 2019
1 parent c9aaee0 commit 8f72d70
Showing 1 changed file with 62 additions and 7 deletions.
69 changes: 62 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,6 @@

Library to get started quickly with Auth0 using React and React-Router.

## Features

* ✔︎
* ✔︎
* ✔︎

## Installation

Install `react-router-auth0` via yarn or npm.
Expand All @@ -18,7 +12,68 @@ $ yarn add react-router-auth0

## Usage

Inside your router, add an `AuthProvider` and your routes.

```
import {
PrivateRoute,
LoginRoute,
LogoutRoute,
LandingPageRoute,
AuthCallbackRoute,
AuthProvider,
} from 'react-router-auth0'
const authedRoutes = (
<AuthProvider
domain={'your_domain.auth0.com'}
clientId={'your_client_id'}
audience={'https://your_domain.auth0.com/userinfo'}
>
<Switch>
<LandingPageRoute exact path="/"
landingUrl="http://my_landing_page"
loggedInPath="/home" />
<LoginRoute exact path="/login" />
<LogoutRoute path='/logout' redirect='/' />
<AuthCallbackRoute path='/auth0-callback' />
<PrivateRoute
</Switch>
</AuthProvider>
)
```

And add it to your main router like this:
```
const Router = () => {
return (
<Provider store={store}>
<ConnectedRouter history={history}>
{authedRoutes}
</ConnectedRouter>
</Provider>
)
}
```

### Component Descriptions:

`AuthProvider`: Main component which will bootstrap you auth0 client.

`PrivateRoute`: Any route the can only be accessed when logged in. If user is not logged in, redirects to the login route.

`LoginRoute`: Takes you to the auth0 lock screen

`LogoutRoute`: Handles auth0 logout and redirects you to the initial/landing page.

`LandingPageRoute`: When hit, will display any url passed through `landingUrl` prop when the user is not logged in. This can be a separate app/page, with or without react, which gives you the option of having one plain html/css lightweight landing page. If the user is logged in, redirects to url passed through `loggedInPath` prop.

`AuthCallbackRoute`: Route which Auth0 will callback once user logs in. Make sure to enable this url on your Auth0 management console.

## LICENSE

MIT
MIT

0 comments on commit 8f72d70

Please sign in to comment.