Sign In

Implement Sign In on your React App

React Auth Kit has easy to implement Sign In procedures.

---

signIn functionality available in both hook and Higher Order Component

• For Functional Components, you can use useSignIn function inside any components
• For class based components, you can wrap the component inside withSignIn 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

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
                        // 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

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})){
            // 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})){
                        // 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