❤
npm
Sign UpSign In

with-react-login

1.13.9 • Public • Published

with-react-login

React hoc component for rendering page only on user log success.

CircleCI npm version

Basic Usage

Using redux-saga-data

See first the store install process in redux-thunk-data.

Then you can declare a login component like this:

 
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import { compose } from 'redux'
import withLogin from 'with-react-login'
 
const withConnectedLogin = compose(
  withRouter,
  withLogin({
    currentUserApiPath: '/users/current',
    handleFail: (state, action, { history }) => history.push('/signin'),
    withDispatcher: connect(),
  })
)
 
const FooPage = () => {
  // withLogin passes a currentUser props
  const { currentUser } = this.props
  const { email } = currentUser || {}
  return (
    <div>
      I am connected with {email} !
    </div>
  )
}
 
export default withConnectedLogin(FooPage)

Depending on what returns GET 'https://myfoo.com/users/current':

  • if it is a 200 with { email: 'michel.momarx@youpi.fr' }, FooPage will be rendered,
  • if it is a 400, app will redirect to '/signin' page.

Using redux-thunk-data

Like above, see the install process in redux-thunk-data.

Then you need just to slightly change setup:

 
import { connect } from 'react-redux'
import { requestData } from 'redux-thunk-data'
import { compose } from 'redux'
import withLogin from 'with-react-login'
 
const withConnectedLogin = compose(
  withRouter,
  withLogin({
    currentUserApiPath: '/users/current',
    handleFail: (state, action, { history }) => history.push('/signin'),
    requestData,
    withDispatcher: connect()
  })
)
...

Using react-hook-data

See redux-hook-data, but this is the same principle.

import { DataContext } from 'react-hook-data'
import withLogin from 'with-react-login'
 
const withConnectedLogin = withLogin({
  currentUserApiPath: '/users/current',
  handleFail: (state, action, { history }) => history.push('/signin'),
  withDispatcher: DataContext
})

Usage with config

withLogin

name type example isRequired default description
currentUserApiPath string no '/users/current' apiPath that will be joined with your rootUrl to get the authenticated user from your auth server
failRedirect function See test no 'undefined' function triggered after fail of your auth currentUserApiPath request saying. It should return a redirect path towards which react-router will history push.
currentUser object no 'null' object saying if withLogin needs to be rendered already with a currentUser. Useful when we want to do redux-persist login
requestData function See test yes requestData from fetch-normalize-data action creator which will trigger the action to request '/users/current'
successRedirect function See test no 'undefined' function triggered after success of your auth currentUserApiPath request saying. It should return a redirect path towards which react-router will history push.
isRequired boolean See test no 'true' Boolean saying if the React WrappedComponent will need to wait a success from the currentUserApiPath to be rendered.

Readme

Keywords

Package Sidebar

Install

npm i with-react-login

Repository

github.com/betagouv/with-react-login

Homepage

github.com/betagouv/with-react-login#readme

Weekly Downloads

1

Version

1.13.9

License

MPL-2.0

Unpacked Size

47 kB

Total Files

15

Last publish

Collaborators

  • ledoux
Try on RunKit
Report malware