Skip to content

Sign Out

Implement Sign Out on your React App

React Auth Kit has easy to implement Sign Out procedures.

It supports both Hooks and Higher Order Component for both Functional Components and Class-based Components

Sign Out using Hooks

Sign Out using Hooks need useSignOut hook

Add the useSignOut hook in the component then call the signOut inside the component

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

Demo

import React from "react"
import { useSignOut } from 'react-auth-kit'

const SignInComponent = () => {
    const signOut = useSignOut()

    return (
      <button onClick={() => signOut()}>Sign Out</button>
    )
}

Sign Out using Higher Order Component

Sign Out using Higher Order Component using withSignOut.

Add the withSignOut HOC and call the this.props.signOut function inside the component

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

Demo

import React from "react"
import { withSignOut } from 'react-auth-kit'

class signOutComponent extends React.Component {

    render(){
        return (
            <button onClick={() => this.props.signOut()}>Sign Out</button>
        )
    }
}

export default withSignIn(signInComponent)

— 🔑 —

React Auth Kit is Apache 2.0 License code