Skip to content

Sign Out

React Auth Kit has easy-to-implement Sign Out procedures.

signOut functionality available in both React Hook and Higher Order Component

  • For Functional Components, you can use useSignOut() hook inside any components
  • For class-based components, you can wrap the component inside withSignOut() HOC function.

Hook

Call useSignOut() hook inside any component to signout the user.

Import

Import useSignOut in your app
1
import useSignOut from 'react-auth-kit/hooks/useSignOut';

Usage

SignOut.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import React from "react"
import useSignOut from 'react-auth-kit/hooks/useSignOut';

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

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

Higher Order Component

Wrap class-based component with withSignOut() to implement signout.

Import

Import withSignOut in your app
1
import withSignOut from 'react-auth-kit/hoc/withSignOut';

Demo

SignOut.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import React from "react"
import withSignOut from 'react-auth-kit/hoc/withSignOut';

class signOutComponent extends React.Component {

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

export default withSignIn(signOutComponent)

API

— 🔑 —

React Auth Kit is MIT License code