From 541f27591a413f6098ce12657030097813d932ea Mon Sep 17 00:00:00 2001 From: Rylan Cai <67412196+cy948@users.noreply.github.com> Date: Sat, 8 Mar 2025 10:02:51 +0800 Subject: [PATCH 1/4] :lipstick: style: Add login ui for next-auth (#6434) --- .../(auth)/next-auth/signin/AuthSignInBox.tsx | 161 ++++++++++++++++++ .../(auth)/next-auth/signin/page.tsx | 11 ++ .../features/SSOProvidersList/index.tsx | 2 +- .../NextAuth}/AuthIcons.tsx | 14 +- src/libs/next-auth/auth.config.ts | 1 + src/middleware.ts | 2 +- 6 files changed, 183 insertions(+), 8 deletions(-) create mode 100644 src/app/[variants]/(auth)/next-auth/signin/AuthSignInBox.tsx create mode 100644 src/app/[variants]/(auth)/next-auth/signin/page.tsx rename src/{app/[variants]/(main)/profile/(home)/features/SSOProvidersList => components/NextAuth}/AuthIcons.tsx (76%) diff --git a/src/app/[variants]/(auth)/next-auth/signin/AuthSignInBox.tsx b/src/app/[variants]/(auth)/next-auth/signin/AuthSignInBox.tsx new file mode 100644 index 0000000000000..c8979f317fab2 --- /dev/null +++ b/src/app/[variants]/(auth)/next-auth/signin/AuthSignInBox.tsx @@ -0,0 +1,161 @@ +'use client'; + +import { LobeChat } from '@lobehub/ui/brand'; +import { Button, Col, Flex, Row, Skeleton, Typography } from 'antd'; +import { createStyles } from 'antd-style'; +import { AuthError } from 'next-auth'; +import { signIn } from 'next-auth/react'; +import { useRouter, useSearchParams } from 'next/navigation'; +import { memo } from 'react'; +import { useTranslation } from 'react-i18next'; + +import BrandWatermark from '@/components/BrandWatermark'; +import AuthIcons from '@/components/NextAuth/AuthIcons'; +import { DOCUMENTS_REFER_URL, PRIVACY_URL, TERMS_URL } from '@/const/url'; +import { useUserStore } from '@/store/user'; + +const { Title, Paragraph } = Typography; + +const useStyles = createStyles(({ css, token }) => ({ + button: css` + text-transform: capitalize; + `, + container: css` + min-width: 360px; + border: 1px solid ${token.colorBorder}; + border-radius: ${token.borderRadiusLG}px; + background: ${token.colorBgContainer}; + `, + contentCard: css` + padding-block: 2.5rem; + padding-inline: 2rem; + `, + description: css` + margin: 0; + color: ${token.colorTextSecondary}; + `, + footer: css` + padding: 1rem; + border-block-start: 1px solid ${token.colorBorder}; + border-radius: 0 0 8px 8px; + + color: ${token.colorTextDescription}; + + background: ${token.colorBgElevated}; + `, + text: css` + text-align: center; + `, + title: css` + margin: 0; + color: ${token.colorTextHeading}; + `, +})); + +const BtnListLoading = memo(() => { + return ( + + + + + + ); +}); + +/** + * Follow the implementation from AuthJS official documentation, + * but using client components. + * ref: https://authjs.dev/guides/pages/signin + */ +export default memo(() => { + const { styles } = useStyles(); + const { t } = useTranslation('clerk'); + const router = useRouter(); + + const oAuthSSOProviders = useUserStore((s) => s.oAuthSSOProviders); + + const searchParams = useSearchParams(); + + // Redirect back to the page url + const callbackUrl = searchParams.get('callbackUrl') ?? ''; + + const handleSignIn = async (provider: string) => { + try { + await signIn(provider, { redirectTo: callbackUrl }); + } catch (error) { + // Signin can fail for a number of reasons, such as the user + // not existing, or the user not having the correct role. + // In some cases, you may want to redirect to a custom error + if (error instanceof AuthError) { + return router.push(`/next-auth/?error=${error.type}`); + } + + // Otherwise if a redirects happens Next.js can handle it + // so you can just re-thrown the error and let Next.js handle it. + // Docs: https://nextjs.org/docs/app/api-reference/functions/redirect#server-component + throw error; + } + }; + + const footerBtns = [ + { href: DOCUMENTS_REFER_URL, id: 0, label: t('footerPageLink__help') }, + { href: PRIVACY_URL, id: 1, label: t('footerPageLink__privacy') }, + { href: TERMS_URL, id: 2, label: t('footerPageLink__terms') }, + ]; + + return ( +
+
+ {/* Card Body */} + + {/* Header */} +
+ + <div> + <LobeChat size={48} /> + </div> + {t('signIn.start.title', { applicationName: 'LobeChat' })} + + {t('signIn.start.subtitle')} +
+ {/* Content */} + + {oAuthSSOProviders ? ( + oAuthSSOProviders.map((provider) => ( + + )) + ) : ( + + )} + + +
+
+ {/* Footer */} + + + + + + + + + {footerBtns.map((btn) => ( + + ))} + + + +
+
+ ); +}); diff --git a/src/app/[variants]/(auth)/next-auth/signin/page.tsx b/src/app/[variants]/(auth)/next-auth/signin/page.tsx new file mode 100644 index 0000000000000..900bd821b6797 --- /dev/null +++ b/src/app/[variants]/(auth)/next-auth/signin/page.tsx @@ -0,0 +1,11 @@ +import { Suspense } from 'react'; + +import Loading from '@/components/Loading/BrandTextLoading'; + +import AuthSignInBox from './AuthSignInBox'; + +export default () => ( + }> + + +); diff --git a/src/app/[variants]/(main)/profile/(home)/features/SSOProvidersList/index.tsx b/src/app/[variants]/(main)/profile/(home)/features/SSOProvidersList/index.tsx index 86cb869bacf78..6f5e3160f1d07 100644 --- a/src/app/[variants]/(main)/profile/(home)/features/SSOProvidersList/index.tsx +++ b/src/app/[variants]/(main)/profile/(home)/features/SSOProvidersList/index.tsx @@ -10,7 +10,7 @@ import { userService } from '@/services/user'; import { useUserStore } from '@/store/user'; import { userProfileSelectors } from '@/store/user/selectors'; -import AuthIcons from './AuthIcons'; +import AuthIcons from '@/components/NextAuth/AuthIcons'; const { Item } = List; diff --git a/src/app/[variants]/(main)/profile/(home)/features/SSOProvidersList/AuthIcons.tsx b/src/components/NextAuth/AuthIcons.tsx similarity index 76% rename from src/app/[variants]/(main)/profile/(home)/features/SSOProvidersList/AuthIcons.tsx rename to src/components/NextAuth/AuthIcons.tsx index 76157452b4302..47d6cc5c4b184 100644 --- a/src/app/[variants]/(main)/profile/(home)/features/SSOProvidersList/AuthIcons.tsx +++ b/src/components/NextAuth/AuthIcons.tsx @@ -12,10 +12,6 @@ import { } from '@lobehub/ui/icons'; import React from 'react'; -const iconProps = { - size: 32, -}; - const iconComponents: { [key: string]: React.ElementType } = { 'auth0': Auth0, 'authelia': Authelia.Color, @@ -29,9 +25,15 @@ const iconComponents: { [key: string]: React.ElementType } = { 'zitadel': Zitadel.Color, }; -const AuthIcons = (id: string) => { +/** + * Get the auth icons component for the given id + * @param id + * @param size default is 36 + * @returns + */ +const AuthIcons = (id: string, size = 36) => { const IconComponent = iconComponents[id] || iconComponents.default; - return ; + return ; }; export default AuthIcons; diff --git a/src/libs/next-auth/auth.config.ts b/src/libs/next-auth/auth.config.ts index d9531bcdcd5f3..6ba7bacf7a3ec 100644 --- a/src/libs/next-auth/auth.config.ts +++ b/src/libs/next-auth/auth.config.ts @@ -42,6 +42,7 @@ export default { debug: authEnv.NEXT_AUTH_DEBUG, pages: { error: '/next-auth/error', + signIn: '/next-auth/signin', }, providers: initSSOProviders(), secret: authEnv.NEXT_AUTH_SECRET, diff --git a/src/middleware.ts b/src/middleware.ts index 97e2c271e73e9..cb2dd411c4220 100644 --- a/src/middleware.ts +++ b/src/middleware.ts @@ -36,7 +36,7 @@ export const config = { '/login(.*)', '/signup(.*)', - '/next-auth/error', + '/next-auth/(.*)', // ↓ cloud ↓ ], }; From 963f7889de07b58afe4d260a8582a19e16be6c39 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Sat, 8 Mar 2025 10:07:29 +0800 Subject: [PATCH 2/4] Update dependency framer-motion to v12 (#5597) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f5ba03e23b2be..2791d7a443dbc 100644 --- a/package.json +++ b/package.json @@ -165,7 +165,7 @@ "epub2": "^3.0.2", "fast-deep-equal": "^3.1.3", "file-type": "^20.0.0", - "framer-motion": "^11.16.0", + "framer-motion": "^12.0.0", "gpt-tokenizer": "^2.8.1", "html-to-text": "^9.0.5", "i18next": "^24.2.1", From b6eeba585056f2b28d4a5bd3b49d7f48974adf35 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Sat, 8 Mar 2025 02:16:01 +0000 Subject: [PATCH 3/4] :bookmark: chore(release): v1.69.3 [skip ci] MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### [Version 1.69.3](https://github.com/lobehub/lobe-chat/compare/v1.69.2...v1.69.3) Released on **2025-03-08** #### 💄 Styles - **misc**: Add login ui for next-auth.
Improvements and Fixes #### Styles * **misc**: Add login ui for next-auth, closes [#6434](https://github.com/lobehub/lobe-chat/issues/6434) ([541f275](https://github.com/lobehub/lobe-chat/commit/541f275))
[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
--- CHANGELOG.md | 25 +++++++++++++++++++++++++ package.json | 2 +- 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 27f67f839320f..8ac30cb7bfe06 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,31 @@ # Changelog +### [Version 1.69.3](https://github.com/lobehub/lobe-chat/compare/v1.69.2...v1.69.3) + +Released on **2025-03-08** + +#### 💄 Styles + +- **misc**: Add login ui for next-auth. + +
+ +
+Improvements and Fixes + +#### Styles + +- **misc**: Add login ui for next-auth, closes [#6434](https://github.com/lobehub/lobe-chat/issues/6434) ([541f275](https://github.com/lobehub/lobe-chat/commit/541f275)) + +
+ +
+ +[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top) + +
+ ### [Version 1.69.2](https://github.com/lobehub/lobe-chat/compare/v1.69.1...v1.69.2) Released on **2025-03-07** diff --git a/package.json b/package.json index 2791d7a443dbc..4fa7ca8416a91 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@lobehub/chat", - "version": "1.69.2", + "version": "1.69.3", "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.", "keywords": [ "framework", From f3c49cfd6a73098c9262c9c08f7dadff14a6faed Mon Sep 17 00:00:00 2001 From: lobehubbot Date: Sat, 8 Mar 2025 02:17:04 +0000 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=93=9D=20docs(bot):=20Auto=20sync=20a?= =?UTF-8?q?gents=20&=20plugin=20to=20readme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- changelog/v1.json | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/changelog/v1.json b/changelog/v1.json index 348747aad393f..a32b8bf024fce 100644 --- a/changelog/v1.json +++ b/changelog/v1.json @@ -1,4 +1,11 @@ [ + { + "children": { + "improvements": ["Add login ui for next-auth."] + }, + "date": "2025-03-08", + "version": "1.69.3" + }, { "children": { "improvements": ["Refactor the agent runtime implement."]