29 |
30 |
31 |
32 |
33 | React Authentication
34 |
35 |
36 |
37 |
49 |
60 |
61 |
65 | )
66 | }
67 | }
68 |
69 | export default Container
70 |
--------------------------------------------------------------------------------
/src/views/Main/Home/Home.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes as T } from 'react'
2 | import {Jumbotron, Button} from 'react-bootstrap'
3 | import AuthService from 'utils/AuthService'
4 | import styles from './styles.module.css'
5 | import { Link } from 'react-router'
6 |
7 | export class Home extends React.Component {
8 | static contextTypes = {
9 | router: T.object
10 | }
11 |
12 | static propTypes = {
13 | auth: T.instanceOf(AuthService)
14 | }
15 |
16 | logout(){
17 | this.props.auth.logout()
18 | this.context.router.push('/home')
19 | }
20 |
21 | render() {
22 | const { isAuthenticated } = this.props.auth
23 | return (
24 |
62 | { children }
63 |
64 | Welcome!
26 |This app demonstrates how to add authentication to a React app. More specifically, it covers how to:
27 |-
28 |
- Add a login/signup area which returns a JSON Web Token that is saved in
localStorage
29 | - Conditionally hide and show various parts of the application depending on the user's authentication state 30 |
- Create a profile area which displays user information from the payload of the JWT 31 |
- Protect client-side routes with the
onEnterroute event
32 | - Make requests for server resources protected by JWT middleware on the server 33 |
- Make requests for server resources that require a specific
scopeto be present in the JWT payload
34 |
{ instructor.first_name + ' ' + instructor.last_name }
18 |{ instructor.email }
19 |{ instructor.company }
20 | 21 |
52 |
62 | )
63 | }
64 | }
65 |
66 | export default Instructor
67 |
--------------------------------------------------------------------------------
/src/views/Main/Instructor/styles.module.css:
--------------------------------------------------------------------------------
1 | h3 {
2 | margin-top: 0;
3 | }
4 |
5 | button {
6 | margin-bottom: 15px !important;
7 | }
8 |
9 | ul {
10 | padding: 0;
11 | }
--------------------------------------------------------------------------------
/src/views/Main/Login/Login.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes as T } from 'react'
2 | import {Tabs, Col, Tab, ButtonToolbar, Button, FormGroup, FormControl, ControlLabel, Alert} from 'react-bootstrap'
3 | import AuthService from 'utils/AuthService'
4 | import styles from './styles.module.css'
5 |
6 | export class Login extends React.Component {
7 | constructor(context) {
8 | super()
9 | this.state = {
10 | user: '',
11 | username: '',
12 | email: '',
13 | password: '',
14 | loginError: '',
15 | signupError: ''
16 | }
17 | }
18 | static contextTypes = {
19 | router: T.object
20 | }
21 |
22 | static propTypes = {
23 | location: T.object,
24 | auth: T.instanceOf(AuthService)
25 | }
26 |
27 | onLoginSubmit(event) {
28 | event.preventDefault()
29 | const { user, password } = this.state
30 | if (user && password) {
31 | this.props.auth.login(user, password)
32 | .then(result => {
33 | if (!result.token) {
34 | this.setState({loginError: result.message})
35 | return
36 | }
37 | this.props.auth.finishAuthentication(result.token)
38 | this.context.router.push('/profile')
39 | })
40 | }
41 | }
42 |
43 | onSignupSubmit(event) {
44 | event.preventDefault()
45 | const { username, email, password } = this.state
46 | if (username && email && password) {
47 | this.props.auth.signup(username, email, password)
48 | .then(result => {
49 | if (!result.token) {
50 | this.setState({signupError: result.message})
51 | return
52 | }
53 | this.props.auth.finishAuthentication(result.token)
54 | this.context.router.push('/profile')
55 | })
56 | }
57 | }
58 |
59 | handleChange(event) {
60 | this.setState({[event.target.name]: event.target.value})
61 | }
62 |
63 | render() {
64 | const { auth } = this.props
65 | return (
66 | Front End Masters Instructors
53 | { auth.isAuthenticated() && auth.isAdmin() && 54 | 57 | } 58 |-
59 | {instructorList}
60 |
30 |
32 | 
34 |
35 |
38 |
43 |
44 | )
45 | }
46 | }
47 |
48 | export default Profile
49 |
--------------------------------------------------------------------------------
/src/views/Main/Profile/styles.module.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/3solution/react-user-authentication-master/2f05ef87105da32992475a3ed729062efae08f2d/src/views/Main/Profile/styles.module.css
--------------------------------------------------------------------------------
/src/views/Main/routes.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {Route, IndexRedirect} from 'react-router'
3 | import AuthService from 'utils/AuthService'
4 | import Container from './Container'
5 | import Home from './Home/Home'
6 | import Login from './Login/Login'
7 | import Profile from './Profile/Profile'
8 | import Instructor from './Instructor/Instructor'
9 | import NewInstructor from './NewInstructor/NewInstructor'
10 |
11 | const auth = new AuthService()
12 |
13 | // onEnter callback to validate authentication in private routes
14 | const requireAuth = (nextState, replace) => {
15 | if (!auth.isAuthenticated()) {
16 | replace({ pathname: '/login' })
17 | }
18 | }
19 |
20 | const requireAdmin = (nextState, replace) => {
21 | if (!auth.isAuthenticated() || !auth.isAdmin()) {
22 | replace({ pathname: '/login' })
23 | }
24 | }
25 |
26 | export const makeMainRoutes = () => {
27 | return (
28 | Profile
31 |
34 |
35 | {profile.username}
37 |38 |
{ profile.email }
39 |Payload
40 |{ JSON.stringify(payload, null, 2) }
41 |
42 |