尧图网站建设 
在 Refine v5 中集成 Kinde 登录从 KindeProvider 到 authProvider 的完整实战【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine导读本篇文章以 Refine v5 官方示例auth-kinde为主体讲解如何将 Kinde一款提供多种身份认证方式的第三方身份服务集成进 Refine 管理后台应用中。读完本文你将掌握如何用refine-auth/kinde-react的KindeProvider与useAuthProvider组装 Refine 的authProvider、如何用Authenticated组件做路由守卫、如何把 Kinde 返回的 token 注入 HTTP 请求头以及登录页与列表页的完整落地代码。一、示例与文档的定位关联文档Kinde Example | Best Practices in Refine v5示例目录examples/auth-kinde原文档指出Kinde 通过提供一系列可选的身份认证方式让认证 授权变得简单本示例展示如何在 Refine 中使用 Kinde 登录。同时文档明确说明该示例无法在 CodeSandbox 的 embed 模式中直接运行——因为 Kinde 需要将回调 URLcallback URLs加入白名单因此必须把示例在浏览器中打开并尝试。从源码结构看examples/auth-kinde是一个基于 Vite 构建的 React 19 Ant Design React Router 7 应用其依赖与脚本定义在 package.json 中refine-auth/kinde-reactKinde 官方社区提供的 React 适配层封装了登录/登出与 authProvider 的生成refinedev/core、refinedev/antd、refinedev/react-router、refinedev/simple-restRefine v5 的核心、Ant Design 集成、路由与 REST 数据提供器axios用于携带 Bearer token 请求https://api.fake-rest.refine.dev测试接口。二、整体架构与认证流程从 App.tsx 与 index.tsx 的代码结构可以梳理出如下认证闭环应用根组件KindeProvider接收 Kinde 应用配置clientId、domain、redirectUri、logoutUri 等完成 SDK 初始化useAuthProvider()基于 Kinde 会话状态生成 Refine 所需的authProvider返回{ isLoading, authProvider, token }生成的authProvider传入Refine authProvider{...}驱动Authenticated、useLogin、useLogout等 Refine 认证 API拿到token后写入axios.defaults.headers.common使后续数据请求自动携带Authorization: Bearer token未登录访问受保护路由时Authenticated通过CatchAllNavigate重定向到/login已登录访问/login时则跳回资源页。三、KindeProvider初始化 Kinde 应用Kinde 集成从根组件的KindeProvider开始完整代码见 src/index.tsximport React from react; import { createRoot } from react-dom/client; import KindeProvider from refine-auth/kinde-react; import App from ./App; const container document.getElementById(root); const root createRoot(container!); root.render( React.StrictMode KindeProvider clientId1b29435f50084bbd91c4fe423d7586a6 domainhttps://refine.kinde.com logoutUri{window.location.origin} redirectUri{window.location.origin} // Local Storage is necessary to keep auth persistent isDangerouslyUseLocalStorage App / /KindeProvider /React.StrictMode, );各配置项的含义与注意事项clientId在 Kinde 后台为应用分配的客户端 ID。示例中硬编码的是官方示例应用的 ID实际项目应替换为你在 Kinde 控制台创建的应用 IDdomain你的 Kinde 域名格式为https://subdomain.kinde.comSDK 的所有认证跳转都基于该域名redirectUri登录成功后的回调地址示例使用window.location.origin即当前站点根路径logoutUri登出完成后的跳转地址同样指向站点根路径isDangerouslyUseLocalStorage启用 localStorage 持久化会话保证页面刷新后认证状态不丢失。正如代码注释所强调的Local Storage is necessary to keep auth persistent。该属性名带Dangerously前缀说明官方对其安全性有保留意见生产环境应根据你的安全要求评估存储方式。需要特别注意原文档强调的一点Kinde 要求在后台将回调 URL 加入白名单因此该示例在 CodeSandbox 的 embed 模式中无法工作——embed 的 iframe 内嵌 URL 无法预先配置进白名单要体验必须通过浏览器打开示例站点让redirectUri落在你已配置的回调域名下。四、useAuthProvider把 Kinde 会话桥接为 Refine authProvider在 App.tsx 的组件顶层调用const { isLoading, authProvider, token } useAuthProvider(); useEffect(() { if (token) { axios.defaults.headers.common { Authorization: Bearer ${token}, }; } }, [token]); if (isLoading) { return spanloading.../span; }isLoadingKinde SDK 初始化/会话恢复期间为true此时渲染加载占位避免在认证状态确定前挂载受保护路由authProvider由refine-auth/kinde-react基于当前 Kinde 会话自动生成的 Refine v5 认证提供器内部实现了login、logout、check、onError等 RefineauthProvider接口token当前访问令牌。示例用useEffect监听 token 变化一旦拿到就将它写入axios的全局默认请求头之后refinedev/simple-rest发起的每次请求都会自动带上Authorization: Bearer token。随后把authProvider与数据提供器、路由提供器一起交给RefineRefine authProvider{authProvider} dataProvider{dataProvider(API_URL, axios)} routerProvider{routerProvider} resources{[ { name: posts, list: /posts, }, ]} notificationProvider{useNotificationProvider} options{{ syncWithLocation: true, warnWhenUnsavedChanges: true, }} ... /Refine其中dataProvider(API_URL, axios)是refinedev/simple-rest对https://api.fake-rest.refine.dev的数据提供器实例options.syncWithLocation让分页/筛选等状态与 URL 同步warnWhenUnsavedChanges在离开含未保存更改的页面时给出提示。五、路由守卫用 Authenticated 保护页面示例通过Authenticated组件把路由分为三组见 App.tsxRoutes Route element{ Authenticated keyauthenticated-routes fallback{CatchAllNavigate to/login /} ThemedLayout Outlet / /ThemedLayout /Authenticated } Route index element{NavigateToResource resourceposts /} / Route path/posts Route index element{PostList /} / /Route /Route Route element{ Authenticated keyauth-pages fallback{Outlet /} NavigateToResource resourceposts / /Authenticated } Route path/login element{Login /} / /Route Route element{ Authenticated keycatch-all ThemedLayout Outlet / /ThemedLayout /Authenticated } Route path* element{ErrorComponent /} / /Route /Routes第一组是受保护页面首页与/posts未登录时Authenticated的fallback触发CatchAllNavigate把用户带到/login第二组是登录页/login已登录用户再访问时会被重定向回资源页NavigateToResource未登录则正常渲染Login第三组兜底 404同样要求登录后才展示ErrorComponentThemedLayout提供 Ant Design 主题化的侧边栏与头部布局UnsavedChangesNotifier /与DocumentTitleHandler /分别处理未保存更改提示与页面标题。六、登录页useLogin 触发 Kinde 跳转src/pages/login.tsx 演示了最小化的登录 UI——一个居中布局、一个按钮import { Layout, Button, Space, Typography } from antd; import { ThemedTitle as ThemedTitleV2 } from refinedev/antd; import { useLogin } from refinedev/core; export const Login: React.FC () { const { mutate: login } useLogin(); return ( Layout style{{ height: 100vh, justifyContent: center, alignItems: center }} Space directionvertical aligncenter sizelarge ThemedTitleV2 collapsed{false} wrapperStyles{{ fontSize: 22px }} / Button typeprimary sizemiddle onClick{() login({ redirectPath: / })} style{{ width: 240px }} Sign in /Button Typography.Text typesecondaryPowered by Kinde/Typography.Text /Space /Layout ); };点击 Sign in 后useLogin()的mutate被调用参数{ redirectPath: / }指定登录成功后的回跳路径底层 authProvider 的login实现会引导用户跳转到 Kinde 托管的登录页完成认证后按redirectUri返回应用。整个登录表单都由 Kinde 托管因此前端无需维护账号密码表单与验证逻辑。七、业务页受保护资源的列表展示src/pages/posts/list.tsx 展示了登录后页面如何使用useTable拉取 posts 并用useMany关联 categoriesimport { useMany } from refinedev/core; import { List, TextField, useTable } from refinedev/antd; import { Table } from antd; export const PostList () { const { tableProps } useTableIPost(); const categoryIds tableProps?.dataSource?.map((item) item.category.id) ?? []; const { result: data, query: { isLoading }, } useManyICategory({ resource: categories, ids: categoryIds, queryOptions: { enabled: categoryIds.length 0 }, }); return ( List Table {...tableProps} rowKeyid Table.Column dataIndexid titleID render{(value) TextField value{value} /} / Table.Column dataIndextitle titleTitle render{(value) TextField value{value} /} / Table.Column dataIndex{[category, id]} titleCategory render{(value) isLoading ? ( TextField valueLoading... / ) : ( TextField value{data?.data.find((item) item.id value)?.title} / ) } / /Table /List ); };这里useTable直接消费refinedev/simple-rest的list能力useMany通过queryOptions.enabled在有 category 时才发起查询。由于前面已把 token 注入 axios 全局头这些请求同样带着 Bearer 凭证。八、本地运行与注意事项运行该示例需 Node.js 20脚本定义见 package.jsonnpm create refine-applatest -- --example auth-kinde # 或进入 examples/auth-kinde 后 npm install npm run dev按原文档的提示在实际体验时请注意回调白名单必须在 Kinde 后台把应用的redirectUri本地开发通常是http://localhost:port加入回调白名单否则登录跳转会被 Kinde 拒绝——这也是 CodeSandbox embed 模式无法工作的原因替换配置示例中的clientId与domain是官方演示配置生产环境请替换为你在 Kinde 控制台创建的应用凭证见 src/index.tsx存储方式isDangerouslyUseLocalStorage能保证刷新后登录态持久但名称已提示其风险生产环境需根据安全策略决定会话存储方案凭证注入token 注入 axios 全局请求头的方式适用于所有经 axios 发出的请求若切换数据提供器或需按请求区分鉴权头可改为在数据提供器层注入。九、小结通过auth-kinde示例可以看到Refine v5 的认证体系与第三方身份服务如 Kinde的对接非常轻量KindeProvider负责 SDK 初始化与会话管理useAuthProvider一行桥接出标准authProviderAuthenticatedCatchAllNavigate完成路由守卫useLogin触发跳转token 则注入 axios 供数据请求鉴权。这套模式同样适用于其他支持 OAuth/OIDC 的身份服务可以作为外部认证 Refine 资源页架构的通用参考模板。如需查阅相关文档与示例可继续阅读 Kinde 示例文档 与 auth-kinde 源码。【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 在 Refine v5 中集成 Kinde 登录：从 KindeProvider 到 authProvider 的完整实战
在 Refine v5 中集成 Kinde 登录从 KindeProvider 到 authProvider 的完整实战【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine导读本篇文章以 Refine v5 官方示例auth-kinde为主体讲解如何将 Kinde一款提供多种身份认证方式的第三方身份服务集成进 Refine 管理后台应用中。读完本文你将掌握如何用refine-auth/kinde-react的KindeProvider与useAuthProvider组装 Refine 的authProvider、如何用Authenticated组件做路由守卫、如何把 Kinde 返回的 token 注入 HTTP 请求头以及登录页与列表页的完整落地代码。一、示例与文档的定位关联文档Kinde Example | Best Practices in Refine v5示例目录examples/auth-kinde原文档指出Kinde 通过提供一系列可选的身份认证方式让认证 授权变得简单本示例展示如何在 Refine 中使用 Kinde 登录。同时文档明确说明该示例无法在 CodeSandbox 的 embed 模式中直接运行——因为 Kinde 需要将回调 URLcallback URLs加入白名单因此必须把示例在浏览器中打开并尝试。从源码结构看examples/auth-kinde是一个基于 Vite 构建的 React 19 Ant Design React Router 7 应用其依赖与脚本定义在 package.json 中refine-auth/kinde-reactKinde 官方社区提供的 React 适配层封装了登录/登出与 authProvider 的生成refinedev/core、refinedev/antd、refinedev/react-router、refinedev/simple-restRefine v5 的核心、Ant Design 集成、路由与 REST 数据提供器axios用于携带 Bearer token 请求https://api.fake-rest.refine.dev测试接口。二、整体架构与认证流程从 App.tsx 与 index.tsx 的代码结构可以梳理出如下认证闭环应用根组件KindeProvider接收 Kinde 应用配置clientId、domain、redirectUri、logoutUri 等完成 SDK 初始化useAuthProvider()基于 Kinde 会话状态生成 Refine 所需的authProvider返回{ isLoading, authProvider, token }生成的authProvider传入Refine authProvider{...}驱动Authenticated、useLogin、useLogout等 Refine 认证 API拿到token后写入axios.defaults.headers.common使后续数据请求自动携带Authorization: Bearer token未登录访问受保护路由时Authenticated通过CatchAllNavigate重定向到/login已登录访问/login时则跳回资源页。三、KindeProvider初始化 Kinde 应用Kinde 集成从根组件的KindeProvider开始完整代码见 src/index.tsximport React from react; import { createRoot } from react-dom/client; import KindeProvider from refine-auth/kinde-react; import App from ./App; const container document.getElementById(root); const root createRoot(container!); root.render( React.StrictMode KindeProvider clientId1b29435f50084bbd91c4fe423d7586a6 domainhttps://refine.kinde.com logoutUri{window.location.origin} redirectUri{window.location.origin} // Local Storage is necessary to keep auth persistent isDangerouslyUseLocalStorage App / /KindeProvider /React.StrictMode, );各配置项的含义与注意事项clientId在 Kinde 后台为应用分配的客户端 ID。示例中硬编码的是官方示例应用的 ID实际项目应替换为你在 Kinde 控制台创建的应用 IDdomain你的 Kinde 域名格式为https://subdomain.kinde.comSDK 的所有认证跳转都基于该域名redirectUri登录成功后的回调地址示例使用window.location.origin即当前站点根路径logoutUri登出完成后的跳转地址同样指向站点根路径isDangerouslyUseLocalStorage启用 localStorage 持久化会话保证页面刷新后认证状态不丢失。正如代码注释所强调的Local Storage is necessary to keep auth persistent。该属性名带Dangerously前缀说明官方对其安全性有保留意见生产环境应根据你的安全要求评估存储方式。需要特别注意原文档强调的一点Kinde 要求在后台将回调 URL 加入白名单因此该示例在 CodeSandbox 的 embed 模式中无法工作——embed 的 iframe 内嵌 URL 无法预先配置进白名单要体验必须通过浏览器打开示例站点让redirectUri落在你已配置的回调域名下。四、useAuthProvider把 Kinde 会话桥接为 Refine authProvider在 App.tsx 的组件顶层调用const { isLoading, authProvider, token } useAuthProvider(); useEffect(() { if (token) { axios.defaults.headers.common { Authorization: Bearer ${token}, }; } }, [token]); if (isLoading) { return spanloading.../span; }isLoadingKinde SDK 初始化/会话恢复期间为true此时渲染加载占位避免在认证状态确定前挂载受保护路由authProvider由refine-auth/kinde-react基于当前 Kinde 会话自动生成的 Refine v5 认证提供器内部实现了login、logout、check、onError等 RefineauthProvider接口token当前访问令牌。示例用useEffect监听 token 变化一旦拿到就将它写入axios的全局默认请求头之后refinedev/simple-rest发起的每次请求都会自动带上Authorization: Bearer token。随后把authProvider与数据提供器、路由提供器一起交给RefineRefine authProvider{authProvider} dataProvider{dataProvider(API_URL, axios)} routerProvider{routerProvider} resources{[ { name: posts, list: /posts, }, ]} notificationProvider{useNotificationProvider} options{{ syncWithLocation: true, warnWhenUnsavedChanges: true, }} ... /Refine其中dataProvider(API_URL, axios)是refinedev/simple-rest对https://api.fake-rest.refine.dev的数据提供器实例options.syncWithLocation让分页/筛选等状态与 URL 同步warnWhenUnsavedChanges在离开含未保存更改的页面时给出提示。五、路由守卫用 Authenticated 保护页面示例通过Authenticated组件把路由分为三组见 App.tsxRoutes Route element{ Authenticated keyauthenticated-routes fallback{CatchAllNavigate to/login /} ThemedLayout Outlet / /ThemedLayout /Authenticated } Route index element{NavigateToResource resourceposts /} / Route path/posts Route index element{PostList /} / /Route /Route Route element{ Authenticated keyauth-pages fallback{Outlet /} NavigateToResource resourceposts / /Authenticated } Route path/login element{Login /} / /Route Route element{ Authenticated keycatch-all ThemedLayout Outlet / /ThemedLayout /Authenticated } Route path* element{ErrorComponent /} / /Route /Routes第一组是受保护页面首页与/posts未登录时Authenticated的fallback触发CatchAllNavigate把用户带到/login第二组是登录页/login已登录用户再访问时会被重定向回资源页NavigateToResource未登录则正常渲染Login第三组兜底 404同样要求登录后才展示ErrorComponentThemedLayout提供 Ant Design 主题化的侧边栏与头部布局UnsavedChangesNotifier /与DocumentTitleHandler /分别处理未保存更改提示与页面标题。六、登录页useLogin 触发 Kinde 跳转src/pages/login.tsx 演示了最小化的登录 UI——一个居中布局、一个按钮import { Layout, Button, Space, Typography } from antd; import { ThemedTitle as ThemedTitleV2 } from refinedev/antd; import { useLogin } from refinedev/core; export const Login: React.FC () { const { mutate: login } useLogin(); return ( Layout style{{ height: 100vh, justifyContent: center, alignItems: center }} Space directionvertical aligncenter sizelarge ThemedTitleV2 collapsed{false} wrapperStyles{{ fontSize: 22px }} / Button typeprimary sizemiddle onClick{() login({ redirectPath: / })} style{{ width: 240px }} Sign in /Button Typography.Text typesecondaryPowered by Kinde/Typography.Text /Space /Layout ); };点击 Sign in 后useLogin()的mutate被调用参数{ redirectPath: / }指定登录成功后的回跳路径底层 authProvider 的login实现会引导用户跳转到 Kinde 托管的登录页完成认证后按redirectUri返回应用。整个登录表单都由 Kinde 托管因此前端无需维护账号密码表单与验证逻辑。七、业务页受保护资源的列表展示src/pages/posts/list.tsx 展示了登录后页面如何使用useTable拉取 posts 并用useMany关联 categoriesimport { useMany } from refinedev/core; import { List, TextField, useTable } from refinedev/antd; import { Table } from antd; export const PostList () { const { tableProps } useTableIPost(); const categoryIds tableProps?.dataSource?.map((item) item.category.id) ?? []; const { result: data, query: { isLoading }, } useManyICategory({ resource: categories, ids: categoryIds, queryOptions: { enabled: categoryIds.length 0 }, }); return ( List Table {...tableProps} rowKeyid Table.Column dataIndexid titleID render{(value) TextField value{value} /} / Table.Column dataIndextitle titleTitle render{(value) TextField value{value} /} / Table.Column dataIndex{[category, id]} titleCategory render{(value) isLoading ? ( TextField valueLoading... / ) : ( TextField value{data?.data.find((item) item.id value)?.title} / ) } / /Table /List ); };这里useTable直接消费refinedev/simple-rest的list能力useMany通过queryOptions.enabled在有 category 时才发起查询。由于前面已把 token 注入 axios 全局头这些请求同样带着 Bearer 凭证。八、本地运行与注意事项运行该示例需 Node.js 20脚本定义见 package.jsonnpm create refine-applatest -- --example auth-kinde # 或进入 examples/auth-kinde 后 npm install npm run dev按原文档的提示在实际体验时请注意回调白名单必须在 Kinde 后台把应用的redirectUri本地开发通常是http://localhost:port加入回调白名单否则登录跳转会被 Kinde 拒绝——这也是 CodeSandbox embed 模式无法工作的原因替换配置示例中的clientId与domain是官方演示配置生产环境请替换为你在 Kinde 控制台创建的应用凭证见 src/index.tsx存储方式isDangerouslyUseLocalStorage能保证刷新后登录态持久但名称已提示其风险生产环境需根据安全策略决定会话存储方案凭证注入token 注入 axios 全局请求头的方式适用于所有经 axios 发出的请求若切换数据提供器或需按请求区分鉴权头可改为在数据提供器层注入。九、小结通过auth-kinde示例可以看到Refine v5 的认证体系与第三方身份服务如 Kinde的对接非常轻量KindeProvider负责 SDK 初始化与会话管理useAuthProvider一行桥接出标准authProviderAuthenticatedCatchAllNavigate完成路由守卫useLogin触发跳转token 则注入 axios 供数据请求鉴权。这套模式同样适用于其他支持 OAuth/OIDC 的身份服务可以作为外部认证 Refine 资源页架构的通用参考模板。如需查阅相关文档与示例可继续阅读 Kinde 示例文档 与 auth-kinde 源码。【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考