Skip to content

Sign In

React Auth Kit has easy-to-implement Signin procedures.

signIn functionality available in both React Hook and Higher Order Component

  • For Functional Components, you can use useSignIn() hook inside any components
  • For class-based components, you can wrap the component inside withSignIn() HOC function.

Hook

Call useSignIn() hook inside any component to signin the user.

Import

Import useSignIn in your app
1
import useSignIn from 'react-auth-kit/hooks/useSignIn';

Usage

SignIn.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import useSignIn from 'react-auth-kit/hooks/useSignIn';

const SignInComponent = () => {
    const signIn = useSignIn();
    ...
    const onSubmit = (e) => {
        ...
        if(signIn({
            auth: {
                token: 'ey....mA',
                type: 'Bearer'
            },
            refresh: 'ey....mA'
            userState: {
                name: 'React User',
                uid: 123456
            }
        })){
            // Redirect or do-something
        }else {
            //Throw error
        }
    }

    return (
        ...
    )
}
Full Example Code 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import React from "react"
import axios from 'axios'
import useSignIn from 'react-auth-kit/hooks/useSignIn';

const SignInComponent = () => {
    const signIn = useSignIn()
    const [formData, setFormData] = React.useState({email: '', password: ''})

    const onSubmit = (e) => {
        e.preventDefault()
        axios.post('/api/login', formData)
            .then((res)=>{
                if(res.status === 200){
                    if(signIn({
                        auth: {
                            token: res.data.token,
                            type: 'Bearer'
                        },
                        refresh: res.data.refreshToken
                        userState: res.data.authUserState
                    })){ // Only if you are using refreshToken feature
                        // Redirect or do-something
                    }else {
                        //Throw error
                    }
                }
            })
    }

    return (
        <form onSubmit={onSubmit}>
            <input type={"email"} onChange={(e)=>setFormData({...formData, email: e.target.value})}/>
            <input type={"password"} onChange={(e)=>setFormData({...formData, password: e.target.value})}/>

            <button>Submit</button>
        </form>
    )
}

Higher Order Component

Wrap class-based component with withSignIn() to implement signin.

Import

Import withSignIn in your app
1
import withSignIn from 'react-auth-kit/hoc/withSignIn';

Usage

SignIn.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { withSignIn } from 'react-auth-kit'

class signInComponent extends React.Component {

    const onSubmit = (e) => {
        ...
        if(this.props.signIn({
            auth: {
                token: 'ey....mA',
                type: 'Bearer'
            },
            refresh: 'ey....mA'
            userState: {
                name: 'React User',
                uid: 123456
            }
        })){
            // Redirect or do-something
        }else {
            //Throw error
        }
    }

    render(){
        ...
    }
}

export default withSignIn(signInComponent)
Full Example Code
SignIn.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import React from 'react'
import axios from 'axios'
import { withSignIn } from 'react-auth-kit'

class signInComponent extends React.Component {
    state={email: '', password: ''}

    onSubmit = (e) => {
        e.preventDefault()
        axios.post('/api/login', this.state)
            .then((res)=>{
                if(res.status === 200){
                    if(this.props.signIn({
                        auth: {
                            token: 'ey....mA',
                            type: 'Bearer'
                        },
                        refresh: 'ey....mA'
                        userState: {
                            name: 'React User',
                            uid: 123456
                        }
                    })){
                        // Redirect or do-something
                    }else {
                        //Throw error
                    }
                }
            })
    }

    render(){
        return (
            <form onSubmit={onSubmit}>
                <input type={"email"} onChange={(e)=>this.setState({...this.state, email: e.target.value})}/>
                <input type={"password"} onChange={(e)=>this.setState({...this.state, password: e.target.value})}/>

                <button>Submit</button>
            </form>
        )
    }
}

export default withSignIn(signInComponent)

API

— 🔑 —

React Auth Kit is MIT License code