Skip to content

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