authentication-react-lab-solutions's Introduction

Authentication in React Lab

Getting started

server
- git clone https://github.com/thoughtworks-jumpstart/express_passport_mongoose_example.git
- cd express_passport_mongoose_example
- yarn install
- mongod
- yarn start (this will run on port 3000)
client
- fork and clone repo
- cd authentication-react-lab
- yarn install
- yarn start (this will run on port 3001)

Component tree

|__App
   |__BrowserRouter
      |__MyApp
         |__TopNavBar
         |__Route --> WelcomeComponent
         |__Route --> <AuthenticationForm title="sign up" />
         |__Route --> <AuthenticationForm title="sign in" />
         |__PrivateRoute
            |__ if isAuthenticated === true
               |___PrivilegedComponent
            |__ if isAuthenticated !== true
               |___<Redirect to="/" />

Key concepts

fetch docs
sessionStorage docs
- sessionStorage.setItem("someKey", "someValue")
- sessionStorage.getItem("someKey")
- sessionStorage.removeItem("someKey")
authentication service - just a set of helper functions to tell you authentication-related stuff (e.g. is the user logged in?) (see utils/AuthService.js)
react-router-dom
- how to redirect (when you're inside render()): <Redirect to="/somepath">
- how to redirect (when you're outside render()): [this.]props.history.push("/somepath")
- how to pass props from a Route to SomeComponent (using ...props) (see Routes inside MyApp.js) (this is useful when we need to access properties added by react-router, e.g. props.history, props.match, or props.location)
The practice of wrapping the component which requires the user to be logged in (e.g. PrivilegedComponent in this example) in a component which contains conditional logic - if user is logged in, display <PrivilegedComponent />, otherwise <Redirect to="/somewhere">
- see PrivateRoute.js as an example

Recommend Projects