You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

react-router-auth

Package Overview
Dependencies
4
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-router-auth

A utility library for React Router v4 for managing authentication based routing


Version published
Weekly downloads
278
increased by9.88%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

React-Router-Auth

A utility library for React Router v4 for managing authentication based routing

NPM Version Build Status Code Coverage

This library is based off of the code from the React Router v4 Docs. The purpose of this library is to make it easy to handle redirecting users for routes that require the user to either be authenticated or unauthenticated.

Install

npm install --save react-router-auth

OR

yarn add react-router-auth

Usage

AuthRoute

Use this component if you have a route that requires the user to be authenticated for them to be able to access it.

e.g. to access user profile page

import React, { Component } from 'react'
import { AuthRoute } from 'react-router-auth'
import UserProfile from './UserProfile'

class Example extends Component {
  render () {
    return (
      <AuthRoute path="/profile" component={UserProfile} redirectTo="/login" authenticated={this.props.authenticated} />
    )
  }
}

In this example, if the user is authenticated while they try to access the /profile route, then the UserProfile component will be rendered. If the user is not authenticated then it will redirect them to the /login route.

Props
NameTypeDescription
authenticatedbooleanWhether the user is authenticated or not
redirectTostringThe route to redirect the user to if not authenticated
componentReact ComponentThe component that requires authentication

UnauthRoute

Use this component if you have a route that a user should only be able to access if they aren't already authenticated.

e.g. to access the login / signup pages

import React, { Component } from 'react'
import { UnauthRoute } from 'react-router-auth'
import Login from './Login'

class Example extends Component {
  render () {
    return (
      <UnauthRoute path="/login" component={Login} redirectTo="/feed" authenticated={this.props.authenticated} />
    )
  }
}

In this example, if the user is authenticated while they try to access the login route, they will be redirected to the /feed route. If the user is not authenticated, then the Login component will be rendered.

Props
NameTypeDescription
authenticatedbooleanWhether the user is authenticated or not
redirectTostringThe route to redirect the user to if authenticated
componentReact ComponentThe component that requires authentication

Usage with Redux

The easiest way to use these components with Redux is by creating your own components to wrap the components from this library with Redux's connect HOC and passing in authenticated as a prop.

Example:

// ConnectedAuthRoute.js
import { connect } from 'react-redux'
import { AuthRoute } from 'react-router-auth'

const mapStateToProps = state => ({
  // In this example the auth reducer has a key
  // called authenticated which determines if the
  // user is authenticated or not
  authenticated: state.auth.authenticated, 
})

export default connect(mapStateToProps)(AuthRoute)

Now if you want to use this in any of your components, you don't need to pass in the authenticated prop as the component is already hooked up to determine the authenticated state from the Redux store.

import React, { Component } from 'react'
import UserProfile from './UserProfile'
// Import our connected AuthRoute component
import ConnectedAuthRoute from './ConnectedAuthRoute'

class Example extends Component {
  render () {
    return (
      {/* we don't need to pass in the authenticated prop anymore */}
      <ConnectedAuthRoute path="/profile" component={UserProfile} redirectTo="/login" />
    )
  }
}

License

MIT © joelseq

Keywords

FAQs

Package last updated on 30 Mar 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc