Authing / Guard

📌 Authing SSO login widget - Your Guard. (🚄Production Ready)
https://cdn.authing.co/packages/guard/doc/v6/guide/install.html
MIT License
1.75k stars 221 forks source link

guard.trackSession is not a function #177

Closed addlistener closed 1 year ago

addlistener commented 1 year ago

"@authing/guard-react18@5.1.2"

using with Next.js SSR

image
// pages/app.tsx
import {GuardProvider, JwtTokenStatus, useGuard, User} from '@authing/guard-react18';
import {useEffect, useState} from "react";
import {Button} from "@mui/material";

const App = () => {
  const guard = useGuard();

  const [isLoading, setLoading] = useState<boolean>(true);
  const [userInfo, setUserInfo] = useState<User | null>(null);

  console.log('render', userInfo);

  useEffect(() => {
    console.log(guard);
    setLoading(true);
    guard.trackSession().then((res: User | null) => {
      setUserInfo(res)
    }).finally(() => {
      setLoading(false);
    });
  }, []);

  if (isLoading) {
    return null;
  }

  if (!userInfo) {
    return <div>
      <Button onClick={() => guard.startWithRedirect()}>
        登录
      </Button>

      这里是被登录保护的页面
    </div>
  }

  return <div>
    <style jsx>{`
      textarea {
        width: 100%;
        height: 400px;
      }
    `}</style>
    <div>
      <Button onClick={async () => {
        console.log('guard.logout', guard.logout);
        await guard.logout();
        console.log('logout finished');
      }}>
        退出
      </Button>
      已经登录成功了
    </div>
    <div>
      <textarea readOnly={true} value={JSON.stringify(userInfo, ' ', 2)} />
    </div>
  </div>;
};
addlistener commented 1 year ago

It's me.