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