请在初始化 AuthenticationClient 时传入 appId 和 secret 参数

[addlistener]

"@authing/guard-react18@5.1.2"

Use with next.js@13

虽然报错，但实际上是登录成功了的

复现代码（基本和样例代码一致 https://github.com/Authing/Guard/blob/master/examples/guard-react18/normal/src/pages/Callback.tsx )

// pages/callback.tsx

// React 16/17
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-react/normal/src/pages/Callback.tsx
// import { JwtTokenStatus, useGuard, User } from '@authing/guard-react';

// React 18
// 代码示例：https://github.com/Authing/Guard/blob/master/examples/guard-react18/normal/src/pages/Callback.tsx
import {GuardProvider, JwtTokenStatus, useGuard, User} from '@authing/guard-react18';

import React, { useEffect } from 'react';

const CallbackInner = () => {
  // const navigate = useNavigate();
  const guard = useGuard()

  const handleCallback = async () => {
    console.log('in handleCallback');
    try {
      // 1. 触发 guard.handleRedirectCallback() 方法完成登录认证
      // 用户认证成功之后，我们会将用户的身份凭证存到浏览器的本地缓存中
      await guard.handleRedirectCallback()

      console.log('111');

      // 2. 处理完 handleRedirectCallback 之后，你需要先检查用户登录态是否正常
      const loginStatus: JwtTokenStatus | undefined  = await guard.checkLoginStatus()

      console.log('222', loginStatus);

      if (!loginStatus) {
        guard.startWithRedirect({
          scope: 'openid profile'
        })
        return
      }

      // 3. 获取到登录用户的用户信息
      const userInfo: User | null = await guard.trackSession()

      console.log('333', userInfo)

      // 你也可以重定向到你的任意业务页面，比如重定向到用户的个人中心
      // 如果你希望实现登录后跳转到同一页面的效果，可以通过在调用 startWithRedirect 时传入的自定义 state 实现
      // 之后你在这些页面可以通过 trackSession 方法获取用户登录态和用户信息

      // 示例一：跳转到固定页面
      location.href = '/app';
      // navigate('/app')

      // 示例二：获取自定义 state，进行特定操作
      // const search = window.location.search
      // 从 URL search 中解析 state
    } catch (e) {
      console.log('444', e);
      // 登录失败，推荐再次跳转到登录页面
      // guard.startWithRedirect({
      //   scope: 'openid profile'
      // })
    }
  }

  useEffect(() => {
    console.log('before handleCallback, in useEffect');
    handleCallback();
  }, []);

  return <div>Redirecting...</div>
}

const Callback = (props) => {
  return (
    <GuardProvider appId={process.env.NEXT_PUBLIC_AUTHING_APP_ID}>
      <CallbackInner {...props} />
    </GuardProvider>
  );
};

export default Callback;

报错信息

报错位置

但之后调用 useGuard 是能够拿到用户信息的，也就是实际上登录是成功了的

[zhaoyiming0803]

你好，我这边用 examples 中的代码看了下，5.1.2 暂时没有复现以上问题哈。目前最新版是 5.1.3-alpha.17，下周会发正式版。

控制台相关配置可参考：Web Guard 文档

或者你可以提供一个最小复现 demo，我这边来跟进排查下。

[addlistener]

应该是和我我的 publicConfig 有关。如果不给特定的 public config 可能不能复现

我也检查了一下，appId是存在的

所以按道理来说，这里报 缺少 appid & secret 是不准确的？ https://github.com/Authing/Guard/blob/211cf14071/packages/guard-shim-react18/src/index.tsx#L155-L168

[zhaoyiming0803]

应该是和我我的 publicConfig 有关。如果不给特定的 public config 可能不能复现

我也检查了一下，appId是存在的

所以按道理来说，这里报 缺少 appid & secret 是不准确的？ https://github.com/Authing/Guard/blob/211cf14071/packages/guard-shim-react18/src/index.tsx#L155-L168

使用 Guard 无需 secret，如果是标准 Web 应用，请在应用详情的 应用配置 -> 其他配置 -> 授权配置 中，请确保应用的 换取 token 身份验证方式 设置为了 none。具体参考这块：Web Guard 文档

方便的话，也可以加我微信：1047832475，发我 appId 看下。

有问题随时反馈，我来跟进。

[addlistener]

这是我在这一行的参数 https://github.com/Authing/Guard/blob/86860056ce1fac68c0fd36d67f03333205d95fb6/packages/guard-shim-react18/src/index.tsx#L170

{
  "appId": "******",
  "appHost": "https://*****.authing.cn",
  "redirectUri": "http://localhost:3000/callback",
  "tokenEndPointAuthMethod": "client_secret_post",
  "introspectionEndPointAuthMethod": "client_secret_post"
}

跑完这个new AuthenticationClient(_authClientOptions)就报错了

[zhaoyiming0803]

这是我在这一行的参数

https://github.com/Authing/Guard/blob/86860056ce1fac68c0fd36d67f03333205d95fb6/packages/guard-shim-react18/src/index.tsx#L170

{
  "appId": "******",
  "appHost": "https://*****.authing.cn",
  "redirectUri": "http://localhost:3000/callback",
  "tokenEndPointAuthMethod": "client_secret_post",
  "introspectionEndPointAuthMethod": "client_secret_post"
}

跑完这个new AuthenticationClient(_authClientOptions)就报错了

在控制台 -> 应用 -> 协议配置 -> 授权配置，将应用的 换取 token 身份验证方式 设置为 none，如下：