wing-use-auth

The auth hook for react

Install

$ yarn add wing-use-auth

# or

$ npm install wing-use-auth

Import

import useAuth, { AuthProvider } from "wing-use-auth";

Usage

// App.js

import { AuthProvider } from "wing-use-auth";

export default function App() {
  return (
    <AuthProvider options={{ cookieKey: "my-app-auth-key-name" }}>
      <ExamplePage />
    </AuthProvider>
  );
}

// ExamplePage.js

import useAuth from "wing-use-auth";

function ExamplePage() {
  const auth = useAuth();
  const login = () => {
    auth.signin(() => {
      // do something here
      // such as: set storage/cookie
      console.log("Logged in");
    });
  };
  return (
    <div>
      {auth.authenticated ? (
        <h1>You have authenticated</h1>
      ) : (
        <div>
          You have not logged in yet，<button onClick={login}>Log In</button>
        </div>
      )}
    </div>
  );
}

AuthProvider Options

| Attribute | Version | Remark | | :------------: | :-----: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | initialState | <=0.0.3 | deprecated | | cookieKey | >=0.0.4 | 根据 cookie 值来设置初识的状态(例如: 在登录的时候设置 cookie 的key为my-app-auth-key-name,那么在初始化状态的时候，会自动取读取该 cookie 值，如果 cookie 存储了该值，那么authenticated为true) |