https://github.com/lukehansell/redux-token-passing-example

using Redux and Auth0 together with Zeit Next.js
https://github.com/lukehansell/redux-token-passing-example

auth0 functional-programming higher-order-component nextjs react redux zeit

Last synced: about 1 month ago
JSON representation

using Redux and Auth0 together with Zeit Next.js

• Host: GitHub
• URL: https://github.com/lukehansell/redux-token-passing-example
• Owner: lukehansell
• Created: 2018-09-20T09:59:21.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-09-20T15:50:26.000Z (over 6 years ago)
• Last Synced: 2024-10-24T16:49:05.717Z (2 months ago)
• Topics: auth0, functional-programming, higher-order-component, nextjs, react, redux, zeit
• Language: JavaScript
• Homepage:
• Size: 74.2 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Example of using Auth0 with Redux to pass tokens for authentication.

#installing

- clone this repo

- `npm i` or use `tink` etc.

- rename `next.config.sample.js` to `next.config.js` and update the settings

- run `npm run dev` for dev environment

#what does each bit do?

`/lib/AuthService` is a wrapped around Auth0's SDK.

`/components` is designed to be display only.

`/hocs` provides higher order functions and components

 - `withLoggedInFlag` provides the `loggedIn` prop derived from the redux state

 - `withLoginAction` provides the `login` prop function which dispatches the `login` action

 - `withLoginAttemptAction` provides the `loginAttempt` prop function with dispatches the `loginAttempt` action

 - `withReduxStore` instantiates a redux store and passes it as a prop to the wrapped components

`pages` provides Next.js' page components 

 - `_app` instantiates the redux store and sets up the containers and context for use by the hocs

 - `callback` is called as part of the Auth0 setup and calls the login attempt action to let redux know that an attempt to login has been made

 - `index` provides with the login button or a message saying hi

 - 

other notable bits are the actions, reducer and store.

The only bit that's of any consequence is the actions.

The `loginAttempt` action will authenticate a hash and return either a successful or error state for an Auth0 login.

That's how we know people have logged in or not.

The `login` action uses the AuthService lib to call off to the auth SaaS to attempt a login handshake.

#todo

- persist tokens over page refreshes

- send token to the server for server rendering of authenticated routes