Sign In

Implement Sign In on your Single Page Web App

React Auth Kit has easy to implement Sign In 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.

---

Usage

Functional Component

signIn in React Functional Components(FC) by adding the useSignIn() hook inside it.

Import

import { useSignIn } from 'react-auth-kit'

Demo

SignIn.js

import { useSignIn } from 'react-auth-kit'

const SignInComponent = () => {
    const signIn = useSignIn()
    ...
    const onSubmit = (e) => {
        ...
        if(signIn(
            {
                token: res.data.token,
                expiresIn:res.data.expiresIn,
                tokenType: "Bearer",
                authState: res.data.authUserState,
                refreshToken: res.data.refreshToken,                    // Only if you are using refreshToken feature
                refreshTokenExpireIn: res.data.refreshTokenExpireIn     // Only if you are using refreshToken feature
            }
        )){
            // Redirect or do-something
        }else {
            //Throw error
        }
    }

    return (
        ...
    )
}

Full Example Code

import React from "react"
import axios from 'axios'
import { useSignIn } from 'react-auth-kit'

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(
                        {
                            token: res.data.token,
                            expiresIn:res.data.expiresIn,
                            tokenType: "Bearer",
                            authState: res.data.authUserState,
                            refreshToken: res.data.refreshToken,                    // Only if you are using refreshToken feature
                            refreshTokenExpireIn: res.data.refreshTokenExpireIn     // Only if you are using refreshToken feature
                        }
                    )){ // 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>
    )
}

API

useSignIn(): (signInConfig) => boolean

For details about signInConfig, please go to the signInConfig section

---

Class Based Component

Sign In using Higher Order Component using withSignIn

Import

import { withSignIn } from 'react-auth-kit'

Demo

SignIn.js

import { withSignIn } from 'react-auth-kit'

class signInComponent extends React.Component {

    const onSubmit = (e) => {
        ...
        if(this.props.signIn(
            {
                token: res.data.token,
                expiresIn:res.data.expiresIn,
                tokenType: "Bearer",
                authState: res.data.authUserState,
                refreshToken: res.data.refreshToken,                    // Only if you are using refreshToken feature
                refreshTokenExpireIn: res.data.refreshTokenExpireIn     // Only if you are using refreshToken feature
            }
        )){
            // Redirect or do-something
        }else {
            //Throw error
        }
    }

    render(){
        ...
    }
}

export default withSignIn(signInComponent)

Full Example Code

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(
                        {
                            token: res.data.token,
                            expiresIn:res.data.expiresIn,
                            tokenType: "Bearer",
                            authState: res.data.authUserState,
                            refreshToken: res.data.refreshToken,                    // Only if you are using refreshToken feature
                            refreshTokenExpireIn: res.data.refreshTokenExpireIn     // Only if you are using refreshToken feature
                        }
                    )){
                        // 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

withSignIn(Component: React.ComponentType): React.FC

Returns React.FC<P> (Functional Component with signIn(signInConfig) prop)

For details about signInConfig, please go to the signInConfig section

---

SignInConfig

{
  token: string
  tokenType: string | 'Bearer'
  expiresIn: number
  authState: object
  refreshToken?: string
  refreshTokenExpireIn?: number
}

Explanation of SignInConfig

Name	Type	Description
token	string	The Authentication token (JWT) to be stored from server
tokenType	string | 'Bearer'	The type of authentication token.
expiresIn	number	The time for which the auth token will last, in minutes
authState	object (optional)	State of the authorized user. Eg: {name: Jhon, email: jhon@auth.com}
refreshToken	string (optional)	Refresh Token sent by the server. Use only, if you are using refresh token feature. For more info Go to the Refresh Token page
refreshTokenExpireIn	number (optional)	The time for which the refresh token will last, in minutes, Use only, if you are using refresh token feature. For more info Go to the Refresh Token page

— 🔑 —

React Auth Kit is Apache 2.0 License code