refactor(auth): migrate social login to next-auth

This commit is contained in:
2026-06-10 10:26:45 +08:00
parent 109a3e3855
commit a4b902893e
34 changed files with 572 additions and 1421 deletions
+1 -2
View File
@@ -15,13 +15,12 @@
},
"dependencies": {
"@fingerprintjs/fingerprintjs": "^5.2.0",
"@greatsumini/react-facebook-login": "^3.4.0",
"@react-oauth/google": "^0.13.5",
"@xstate/react": "^5",
"classnames": "^2.5.1",
"dexie": "^4.4.3",
"lottie-react": "^2.4.1",
"next": "16.2.7",
"next-auth": "^4.24.14",
"ofetch": "^1.5.1",
"react": "19.2.4",
"react-dom": "19.2.4",
+121 -26
View File
@@ -11,12 +11,6 @@ importers:
'@fingerprintjs/fingerprintjs':
specifier: ^5.2.0
version: 5.2.0
'@greatsumini/react-facebook-login':
specifier: ^3.4.0
version: 3.4.0(react@19.2.4)
'@react-oauth/google':
specifier: ^0.13.5
version: 0.13.5(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@xstate/react':
specifier: ^5
version: 5.0.5(@types/react@19.2.16)(react@19.2.4)(xstate@5.32.0)
@@ -32,6 +26,9 @@ importers:
next:
specifier: 16.2.7
version: 16.2.7(@babel/core@7.29.7)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
next-auth:
specifier: ^4.24.14
version: 4.24.14(next@16.2.7(@babel/core@7.29.7)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
ofetch:
specifier: ^1.5.1
version: 1.5.1
@@ -167,6 +164,10 @@ packages:
engines: {node: '>=6.0.0'}
hasBin: true
'@babel/runtime@7.29.7':
resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
engines: {node: '>=6.9.0'}
'@babel/template@7.29.7':
resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==}
engines: {node: '>=6.9.0'}
@@ -282,11 +283,6 @@ packages:
'@fingerprintjs/fingerprintjs@5.2.0':
resolution: {integrity: sha512-j+2nInkwCQNTJcNhOjvkGM/nLRTuGJTC6xai4quqvUpjob2ssrGwBZjS7k55nOmKvge7qvJT2nS3i/IRvQSTQA==}
'@greatsumini/react-facebook-login@3.4.0':
resolution: {integrity: sha512-NJYqTOcDghZ6zLppC+LJVLep7Xi3gfx9ssQFRd7EhDTU07lC15SG/eZ3ZyvUPsuPBkbhVl6E/Py0w4M5m7Lh9Q==}
peerDependencies:
react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0
'@humanfs/core@0.19.2':
resolution: {integrity: sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==}
engines: {node: '>=18.18.0'}
@@ -559,15 +555,12 @@ packages:
'@oxc-project/types@0.133.0':
resolution: {integrity: sha512-KzkdCd6Uxqnf6l3HOw1xfatAlUURA0g14cvBYFyJ5SaNOQbOUvBr9PKArcPcrNIeRsBdgcUzOGrhKveVpvOIGA==}
'@panva/hkdf@1.2.1':
resolution: {integrity: sha512-6oclG6Y3PiDFcoyk8srjLfVKyMfVCKJ27JwNPViuXziFpmdz+MZnZN/aKY0JGXgYuO/VghU0jcOAZgWXZ1Dmrw==}
'@polka/url@1.0.0-next.29':
resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
'@react-oauth/google@0.13.5':
resolution: {integrity: sha512-xQWri2s/3nNekZJ4uuov2aAfQYu83bN3864KcFqw2pK1nNbFurQIjPFDXhWaKH3IjYJ2r/9yyIIpsn5lMqrheQ==}
peerDependencies:
react: '>=16.8.0'
react-dom: '>=16.8.0'
'@rolldown/binding-android-arm64@1.0.3':
resolution: {integrity: sha512-454rs7jHngixp/NMxd5srYD57OnzSlZ/eFTETjORQHLwJG1lRtmNOJcBerZlfu4GjKqeq8aCCIQrMdHyhI51Hw==}
engines: {node: ^20.19.0 || >=22.12.0}
@@ -1230,6 +1223,10 @@ packages:
cookie-es@1.2.3:
resolution: {integrity: sha512-lXVyvUvrNXblMqzIRrxHb57UUVmqsSWlxqt3XIjCkUP0wDAf6uicO6KMbEgYrMNtEvWgWHwe42CKxPu9MYAnWw==}
cookie@0.7.2:
resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
engines: {node: '>= 0.6'}
cross-spawn@7.0.6:
resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
engines: {node: '>= 8'}
@@ -1846,6 +1843,9 @@ packages:
resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
hasBin: true
jose@4.15.9:
resolution: {integrity: sha512-1vUQX+IdDMVPj4k8kOxgUqlcK518yluMuGZwqlr44FS1ppZB/5GWh4rZG89erpOBOJjU/OBsnCVFfapsRz6nEA==}
js-tokens@10.0.0:
resolution: {integrity: sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==}
@@ -2018,6 +2018,10 @@ packages:
lru-cache@5.1.1:
resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
lru-cache@6.0.0:
resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
engines: {node: '>=10'}
magic-string@0.30.21:
resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
@@ -2073,6 +2077,20 @@ packages:
natural-compare@1.4.0:
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
next-auth@4.24.14:
resolution: {integrity: sha512-YRz6xFDXKUwiXSMMChbrBEWyFktZ1qZXEgeSHQQ3nsy08B4c/xLk6REeutRsIFwkjY/1+ShHnu07DN3JeJguig==}
peerDependencies:
'@auth/core': 0.34.3
next: ^12.2.5 || ^13 || ^14 || ^15 || ^16
nodemailer: ^7.0.7
react: ^17.0.2 || ^18 || ^19
react-dom: ^17.0.2 || ^18 || ^19
peerDependenciesMeta:
'@auth/core':
optional: true
nodemailer:
optional: true
next@16.2.7:
resolution: {integrity: sha512-eMJxgjRzBaj3olkP4cBamHDXL79A8FC6u1GcsO1D1Tsx8bw/LLXUJCaoajVxtnhD3A1IJqIT8IcRJjgBIPJq4w==}
engines: {node: '>=20.9.0'}
@@ -2112,10 +2130,17 @@ packages:
resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
engines: {node: '>=0.10.0'}
oauth@0.9.15:
resolution: {integrity: sha512-a5ERWK1kh38ExDEfoO6qUHJb32rd7aYmPHuyCu3Fta/cnICvYmgd2uhuKXvPD+PXB+gCEYYEaQdIRAjCOwAKNA==}
object-assign@4.1.1:
resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
engines: {node: '>=0.10.0'}
object-hash@2.2.0:
resolution: {integrity: sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==}
engines: {node: '>= 6'}
object-inspect@1.13.4:
resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
engines: {node: '>= 0.4'}
@@ -2151,6 +2176,13 @@ packages:
ofetch@1.5.1:
resolution: {integrity: sha512-2W4oUZlVaqAPAil6FUg/difl6YhqhUR7x2eZY4bQCko22UXg3hptq9KLQdqFClV+Wu85UX7hNtdGTngi/1BxcA==}
oidc-token-hash@5.2.0:
resolution: {integrity: sha512-6gj2m8cJZ+iSW8bm0FXdGF0YhIQbKrfP4yWTNzxc31U6MOjfEmB1rHvlYvxI1B7t7BCi1F2vYTT6YhtQRG4hxw==}
engines: {node: ^10.13.0 || >=12.0.0}
openid-client@5.7.1:
resolution: {integrity: sha512-jDBPgSVfTnkIh71Hg9pRvtJc6wTwqjRkN88+gCFtYWrlP4Yx2Dsrow8uPi3qLr/aeymPF3o2+dS+wOpglK04ew==}
optionator@0.9.4:
resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
engines: {node: '>= 0.8.0'}
@@ -2239,10 +2271,21 @@ packages:
resolution: {integrity: sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==}
engines: {node: ^10 || ^12 || >=14}
preact-render-to-string@5.2.6:
resolution: {integrity: sha512-JyhErpYOvBV1hEPwIxc/fHWXPfnEGdRKxc8gFdAZ7XV4tlzyzG847XAyEZqoDnynP88akM4eaHcSOzNcLWFguw==}
peerDependencies:
preact: '>=10'
preact@10.29.2:
resolution: {integrity: sha512-7tNmwg/7mzzAoB/8kSg6Hl37JraAZw3Z3A0JSY7VXlZwo82Xn0G7wKbNNs2qoF4ZEEsQGTwDAroNdqKs1ofJxQ==}
prelude-ls@1.2.1:
resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
engines: {node: '>= 0.8.0'}
pretty-format@3.8.0:
resolution: {integrity: sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==}
prop-types@15.8.1:
resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
@@ -2669,6 +2712,11 @@ packages:
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
uuid@8.3.2:
resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
deprecated: uuid@10 and below is no longer supported. For ESM codebases, update to uuid@latest. For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).
hasBin: true
vite@8.0.16:
resolution: {integrity: sha512-h9bXPmJichP5fLmVQo3PyaGSDE2n3aPuomeAlVRm0JLmt4rY6zmPKd59HYI4LNW8oTK7tlTsuC7l/m7awx9Jcw==}
engines: {node: ^20.19.0 || >=22.12.0}
@@ -2820,6 +2868,9 @@ packages:
yallist@3.1.1:
resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
yallist@4.0.0:
resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
yargs-parser@21.1.1:
resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
engines: {node: '>=12'}
@@ -2942,6 +2993,8 @@ snapshots:
dependencies:
'@babel/types': 7.29.7
'@babel/runtime@7.29.7': {}
'@babel/template@7.29.7':
dependencies:
'@babel/code-frame': 7.29.7
@@ -3061,10 +3114,6 @@ snapshots:
'@fingerprintjs/fingerprintjs@5.2.0': {}
'@greatsumini/react-facebook-login@3.4.0(react@19.2.4)':
dependencies:
react: 19.2.4
'@humanfs/core@0.19.2':
dependencies:
'@humanfs/types': 0.15.0
@@ -3250,12 +3299,9 @@ snapshots:
'@oxc-project/types@0.133.0': {}
'@polka/url@1.0.0-next.29': {}
'@panva/hkdf@1.2.1': {}
'@react-oauth/google@0.13.5(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
dependencies:
react: 19.2.4
react-dom: 19.2.4(react@19.2.4)
'@polka/url@1.0.0-next.29': {}
'@rolldown/binding-android-arm64@1.0.3':
optional: true
@@ -3880,6 +3926,8 @@ snapshots:
cookie-es@1.2.3: {}
cookie@0.7.2: {}
cross-spawn@7.0.6:
dependencies:
path-key: 3.1.1
@@ -4645,6 +4693,8 @@ snapshots:
jiti@2.7.0: {}
jose@4.15.9: {}
js-tokens@10.0.0: {}
js-tokens@4.0.0: {}
@@ -4802,6 +4852,10 @@ snapshots:
dependencies:
yallist: 3.1.1
lru-cache@6.0.0:
dependencies:
yallist: 4.0.0
magic-string@0.30.21:
dependencies:
'@jridgewell/sourcemap-codec': 1.5.5
@@ -4847,6 +4901,21 @@ snapshots:
natural-compare@1.4.0: {}
next-auth@4.24.14(next@16.2.7(@babel/core@7.29.7)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
dependencies:
'@babel/runtime': 7.29.7
'@panva/hkdf': 1.2.1
cookie: 0.7.2
jose: 4.15.9
next: 16.2.7(@babel/core@7.29.7)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
oauth: 0.9.15
openid-client: 5.7.1
preact: 10.29.2
preact-render-to-string: 5.2.6(preact@10.29.2)
react: 19.2.4
react-dom: 19.2.4(react@19.2.4)
uuid: 8.3.2
next@16.2.7(@babel/core@7.29.7)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
dependencies:
'@next/env': 16.2.7
@@ -4886,8 +4955,12 @@ snapshots:
normalize-path@3.0.0: {}
oauth@0.9.15: {}
object-assign@4.1.1: {}
object-hash@2.2.0: {}
object-inspect@1.13.4: {}
object-keys@1.1.1: {}
@@ -4936,6 +5009,15 @@ snapshots:
node-fetch-native: 1.6.7
ufo: 1.6.4
oidc-token-hash@5.2.0: {}
openid-client@5.7.1:
dependencies:
jose: 4.15.9
lru-cache: 6.0.0
object-hash: 2.2.0
oidc-token-hash: 5.2.0
optionator@0.9.4:
dependencies:
deep-is: 0.1.4
@@ -5019,8 +5101,17 @@ snapshots:
picocolors: 1.1.1
source-map-js: 1.2.1
preact-render-to-string@5.2.6(preact@10.29.2):
dependencies:
preact: 10.29.2
pretty-format: 3.8.0
preact@10.29.2: {}
prelude-ls@1.2.1: {}
pretty-format@3.8.0: {}
prop-types@15.8.1:
dependencies:
loose-envify: 1.4.0
@@ -5506,6 +5597,8 @@ snapshots:
dependencies:
react: 19.2.4
uuid@8.3.2: {}
vite@8.0.16(@types/node@20.19.41)(jiti@2.7.0):
dependencies:
lightningcss: 1.32.0
@@ -5632,6 +5725,8 @@ snapshots:
yallist@3.1.1: {}
yallist@4.0.0: {}
yargs-parser@21.1.1: {}
yargs@17.7.2:
+19
View File
@@ -0,0 +1,19 @@
/**
* NextAuth App Router 入口
*
* 路径:/api/auth/[...nextauth]
* 自动处理 NextAuth 所有内置路由:
* /api/auth/signin/[provider]
* /api/auth/callback/[provider]
* /api/auth/signout
* /api/auth/session
* /api/auth/csrf
* /api/auth/providers
*/
import NextAuth from "next-auth";
import { authOptions } from "@/lib/auth/config";
const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };
+27 -27
View File
@@ -6,54 +6,54 @@
*
* 行为:
* - 默认显示「Continue with Facebook」+ 「Other sign-in options」入口
* - 真实 Facebook 登录在「Continue with Facebook」按钮中触发
* - 社交登录直接调 `nextauth.facebookLogin()` / `nextauth.googleLogin()`NextAuth 流程)
*/
import { useState } from "react";
import { useAuthState, useAuthDispatch } from "@/stores/auth/auth-context";
import { useAuthState } from "@/stores/auth/auth-context";
import { facebookLogin, googleLogin } from "@/lib/auth/nextauth";
import { AuthSocialButtons } from "./auth-social-buttons";
import { AuthDivider } from "./auth-divider";
import { AuthPrimaryButton } from "./auth-primary-button";
import { AuthErrorMessage } from "./auth-error-message";
import { AuthOtherOptionsDialog } from "./auth-other-options-dialog";
import { GoogleSignInButton } from "./google-sign-in-button";
import { AuthLegalText } from "./auth-legal-text";
import styles from "./auth-facebook-panel.module.css";
export interface AuthFacebookPanelProps {
onSwitchToEmail: () => void;
onGoogleSuccess: (idToken: string, email: string) => void;
}
export function AuthFacebookPanel({
onSwitchToEmail,
onGoogleSuccess,
}: AuthFacebookPanelProps) {
export function AuthFacebookPanel({ onSwitchToEmail }: AuthFacebookPanelProps) {
const state = useAuthState();
const dispatch = useAuthDispatch();
const [showOptions, setShowOptions] = useState(false);
const [busy, setBusy] = useState<null | "facebook" | "google">(null);
const handleFacebook = async () => {
setBusy("facebook");
const r = await facebookLogin();
setBusy(null);
if (!r.success) console.error("[auth-facebook-panel]", r.error);
};
const handleGoogle = async () => {
setBusy("google");
const r = await googleLogin();
setBusy(null);
if (!r.success) console.error("[auth-facebook-panel]", r.error);
};
return (
<div className={styles.panel}>
<AuthErrorMessage message={state.errorMessage} />
<AuthSocialButtons
loadingProvider={state.isLoading ? "facebook" : null}
onFacebook={() => dispatch({ type: "AuthFacebookLoginSubmitted" })}
onGoogle={() => dispatch({ type: "AuthGoogleLoginSubmitted" })}
googleSlot={
<GoogleSignInButton
onSuccess={(s) =>
onGoogleSuccess(s.idToken, s.email)
}
/>
}
loadingProvider={busy ?? (state.isLoading ? "facebook" : null)}
onFacebook={handleFacebook}
onGoogle={handleGoogle}
/>
<AuthDivider label="or" />
<AuthPrimaryButton
onClick={onSwitchToEmail}
variant="primary"
>
<AuthPrimaryButton onClick={onSwitchToEmail} variant="primary">
Continue with Email
</AuthPrimaryButton>
<button
@@ -69,21 +69,21 @@ export function AuthFacebookPanel({
onClose={() => setShowOptions(false)}
onFacebook={() => {
setShowOptions(false);
dispatch({ type: "AuthFacebookLoginSubmitted" });
void handleFacebook();
}}
onGoogle={() => {
setShowOptions(false);
dispatch({ type: "AuthGoogleLoginSubmitted" });
void handleGoogle();
}}
onApple={() => {
setShowOptions(false);
dispatch({ type: "AuthAppleLoginSubmitted" });
console.warn("Apple login not implemented");
}}
onEmail={() => {
setShowOptions(false);
onSwitchToEmail();
}}
loadingProvider={state.isLoading ? "facebook" : null}
loadingProvider={busy ?? (state.isLoading ? "facebook" : null)}
showApple={false}
/>
</div>
+1 -6
View File
@@ -10,11 +10,7 @@ import { AuthFacebookPanel } from "./auth-facebook-panel";
import { AuthEmailPanel } from "./auth-email-panel";
import styles from "./auth-panel.module.css";
export interface AuthPanelProps {
onGoogleSuccess: (idToken: string, email: string) => void;
}
export function AuthPanel({ onGoogleSuccess }: AuthPanelProps) {
export function AuthPanel() {
const state = useAuthState();
return (
<div className={styles.panel}>
@@ -26,7 +22,6 @@ export function AuthPanel({ onGoogleSuccess }: AuthPanelProps) {
// 但我们目前 AuthFacebookPanel 内部 click "Continue with Email" 直接调用 onSwitchToEmail
// 实际上本组件直接渲染对应 panel
}}
onGoogleSuccess={onGoogleSuccess}
/>
) : (
<AuthEmailPanel onBack={() => undefined} />
+3 -7
View File
@@ -16,7 +16,7 @@ import { useRouter } from "next/navigation";
import { useAuthState, useAuthDispatch } from "@/stores/auth/auth-context";
import { useChatDispatch } from "@/stores/chat/chat-context";
import { useUserDispatch } from "@/stores/user/user-context";
import { useAuthGate } from "@/lib/auth/use-auth-gate";
import { useAuthGate } from "@/lib/auth/nextauth";
import { ROUTES } from "@/lib/routes";
import { MobileShell } from "@/app/_components/core/mobile-shell";
import { AuthPanel } from "@/app/auth/components/auth-panel";
@@ -42,7 +42,7 @@ export function AuthScreen({
if (isAuthed) router.replace(ROUTES.chat);
}, [isAuthed, router]);
// 登录成功 → 通知 Chat + User + 跳转
// 邮箱登录成功 → 通知 Chat + User + 跳转
useEffect(() => {
if (state.isSuccess && !wasSuccess.current) {
wasSuccess.current = true;
@@ -63,11 +63,7 @@ export function AuthScreen({
padding: "var(--spacing-lg)",
}}
>
<AuthPanel
onGoogleSuccess={(idToken, email) => {
authDispatch({ type: "AuthWebGoogleLoginSuccess", idToken, email });
}}
/>
<AuthPanel />
</div>
</MobileShell>
);
@@ -1,50 +0,0 @@
"use client";
/**
* Google 登录按钮(GIS 渲染)
*
* 原始 Dart: lib/ui/auth/widgets/google_sign_in_web.dart
*
* 通过 `google.accounts.id.renderButton` 把 GIS 官方按钮渲染到指定 div。
* 登录成功由 `setOnGoogleSignInSuccess` 设置的回调处理。
*/
import { useEffect, useRef } from "react";
import {
renderGoogleButton,
setOnGoogleSignInSuccess,
type GoogleSignInSuccess,
} from "@/integrations/google-identity";
import styles from "./google-sign-in-button.module.css";
export interface GoogleSignInButtonProps {
onSuccess: (success: GoogleSignInSuccess) => void;
}
export function GoogleSignInButton({ onSuccess }: GoogleSignInButtonProps) {
const ref = useRef<HTMLDivElement | null>(null);
useEffect(() => {
setOnGoogleSignInSuccess(onSuccess);
return () => setOnGoogleSignInSuccess(null);
}, [onSuccess]);
useEffect(() => {
if (!ref.current) return;
let cancelled = false;
// GIS 异步加载,轮询直到可用
const tryRender = () => {
if (cancelled) return;
if (window.google?.accounts?.id) {
renderGoogleButton(ref.current!, { theme: "outline", size: "large" });
} else {
setTimeout(tryRender, 100);
}
};
tryRender();
return () => {
cancelled = true;
};
}, []);
return <div ref={ref} className={styles.slot} />;
}
-1
View File
@@ -17,5 +17,4 @@ export * from "./auth-text-field";
export * from "./auth-validators";
export * from "./email-login-form";
export * from "./email-register-form";
export * from "./google-sign-in-button";
export * from "./__tests__/auth-validators.test";
+6 -13
View File
@@ -1,7 +1,7 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import localFont from "next/font/local";
import Script from "next/script";
import { SessionProvider } from "next-auth/react";
import "./globals.css";
import { RootProviders } from "@/providers/root-providers";
@@ -61,24 +61,17 @@ export default function RootLayout({
}>) {
return (
// suppressHydrationWarningnext/font + Tailwind v4 偶发类名差异;详见
// `src/lib/auth/use-auth-gate.tsx` 的"水合闪屏"说明。
// `src/lib/auth/nextauth.ts` 的"水合闪屏"说明。
<html
lang="en"
suppressHydrationWarning
className={`${geistSans.variable} ${geistMono.variable} ${athelas.variable} h-full antialiased`}
>
<body className="min-h-full flex flex-col">
{/* Facebook SDK JSauth + splash 入口会用到 FB.login */}
<Script
src="https://connect.facebook.net/en_US/sdk.js"
strategy="afterInteractive"
/>
{/* Google Identity Servicesauth 入口会用到 google.accounts.id */}
<Script
src="https://accounts.google.com/gsi/client"
strategy="afterInteractive"
/>
<RootProviders>{children}</RootProviders>
{/* NextAuth SessionProvider:为所有客户端组件提供 useSession() 上下文 */}
<SessionProvider>
<RootProviders>{children}</RootProviders>
</SessionProvider>
</body>
</html>
);
+15 -14
View File
@@ -6,16 +6,12 @@
* `Row(children: [Skip 文本, SizedBox 26, Facebook 登录按钮])`
*
* 本组件是 splash 鉴权流程的**自治单元**
* - 直接消费 `useAuthGate` / `useAuthState` / `useAuthDispatch`
* - 直接消费 `useChatDispatch` / `useUserDispatch`登录成功后初始化
* - 消费 `useAuthGate`(内部用 useSession 监听 NextAuth session
* - 消费 `useAuthState` / `useAuthDispatch`邮箱登录流程
* - 消费 `useChatDispatch` / `useUserDispatch`(登录成功后初始化)
* - 自管路由跳转(已登录 / 登录成功 → /chat)
* - Skip 用 `<Link>` 保留 SPA 体验
*
* 设计要点:
* - 仅两个元素:Skip 文本 + Facebook 登录按钮
* - 居中布局 (MainAxisAlignment.center)
* - Facebook 按钮:带渐变(primaryGradient+ 圆角 24 + 高度 48
* - 加载中:按钮内显示 spinner
* - 社交登录按钮直接调 `nextauth.facebookLogin()`NextAuth 流程)
*/
import Link from "next/link";
import { useRouter } from "next/navigation";
@@ -24,7 +20,7 @@ import { useEffect, useRef } from "react";
import { useAuthState, useAuthDispatch } from "@/stores/auth/auth-context";
import { useChatDispatch } from "@/stores/chat/chat-context";
import { useUserDispatch } from "@/stores/user/user-context";
import { useAuthGate } from "@/lib/auth/use-auth-gate";
import { facebookLogin, useAuthGate } from "@/lib/auth/nextauth";
import { ROUTES } from "@/lib/routes";
import { LoadingIndicator } from "@/app/_components/core/loading-indicator";
import styles from "./splash-button.module.css";
@@ -52,7 +48,7 @@ export function SplashButton({ skipHref = ROUTES.chat }: SplashButtonProps) {
if (isAuthed) router.replace(ROUTES.chat);
}, [isAuthed, router]);
// 登录成功跳 /chat + 通知 chat/user 初始化
// 邮箱登录成功跳 /chat + 通知 chat/user 初始化
useEffect(() => {
if (state.isSuccess && !wasSuccess.current) {
wasSuccess.current = true;
@@ -62,6 +58,13 @@ export function SplashButton({ skipHref = ROUTES.chat }: SplashButtonProps) {
}
}, [state.isSuccess, chatDispatch, userDispatch, router]);
const handleFacebookLogin = async () => {
const r = await facebookLogin();
if (!r.success) {
console.error("[splash-button] Facebook login failed", r.error);
}
};
return (
<div className={styles.wrapper}>
{/* Skip 文本链接(next/link 渲染为 <a>,保留 SPA 体验) */}
@@ -77,12 +80,10 @@ export function SplashButton({ skipHref = ROUTES.chat }: SplashButtonProps) {
<div className={styles.separator} aria-hidden="true" />
{/* Facebook 登录按钮(带渐变 */}
{/* 社交登录按钮(NextAuth Facebook OAuth */}
<button
type="button"
onClick={() => {
authDispatch({ type: "AuthFacebookLoginSubmitted" });
}}
onClick={handleFacebookLogin}
disabled={isLoading}
className={styles.facebookButton}
>
@@ -1,242 +0,0 @@
"use client";
/**
* 第三方登录 Bridge 组件。
*
* 原始 Dart: lib/utils/google_auth_initializer.dart + lib/utils/facebook_auth_initializer.dart
*
* 设计:
* - 不渲染任何 UI`children` 透传)。
* - 通过 `@react-oauth/google` 的 `GoogleOAuthProvider` 加载的 GIS 脚本,
* 调用 `window.google.accounts.id.initialize` + `prompt` 实现 Google 登录弹窗;
* callback 收到 id_token 后解析 JWT payload 拿到 email/displayName/photoUrl。
* - 通过 `@greatsumini/react-facebook-login` 的 `FacebookLoginClient.init` +
* `FacebookLoginClient.login` 实现 Facebook 登录弹窗。
* - 监听 `auth_event_bridge` 派发的 `cozsweet:auth:*:start` 事件,触发对应
* SDK 流程;拿到凭证后回调 `platform.resolveGoogle()` / `platform.resolveFacebook()`。
* - 单 popup 语义:v1 一次只追踪一个待处理 Google / Facebook 请求,多个并发
* 调用会被覆盖。后续如需并发支持,需把 ref 改为 `Map<requestId, resolver>`。
*
* 部署:本步骤**不**挂载到 `src/app/layout.tsx`。下一轮 UI 接入时按如下方式挂载:
*
* import { GoogleOAuthProvider } from "@react-oauth/google";
* import { AuthPlatformBridge } from "@/data/services/auth";
*
* <GoogleOAuthProvider clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID!}>
* <AuthPlatformBridge platform={getAuthPlatform({...})}>
* {children}
* </AuthPlatformBridge>
* </GoogleOAuthProvider>
*/
import { useEffect, useRef } from "react";
import { useGoogleOAuth } from "@react-oauth/google";
import { FacebookLoginClient, LoginStatus } from "@greatsumini/react-facebook-login";
import { Result, toError, type Result as ResultT } from "@/utils/result";
import type {
IAuthPlatform,
IAuthPlatformOptions,
GoogleCredential,
FacebookLoginResult,
} from "./auth_platform";
import { AUTH_EVENTS, onAuthEvent } from "./auth_event_bridge";
/**
* Bridge 要求 platform 是带 `opts` + `resolveGoogle` + `resolveFacebook` 的
* WebAuthPlatform。结构化类型便于 mock / 子类扩展。
*/
export interface AuthPlatformBridgeProps {
platform: IAuthPlatform & {
readonly opts: IAuthPlatformOptions;
resolveGoogle(
requestId: string,
result: ResultT<GoogleCredential>,
): void;
resolveFacebook(
requestId: string,
result: ResultT<FacebookLoginResult>,
): void;
};
children?: React.ReactNode;
}
export function AuthPlatformBridge({
platform,
children,
}: AuthPlatformBridgeProps) {
const platformRef = useRef(platform);
// 在 effect 中更新 refreact-hooks/refs 规则禁止 render 期更新 ref.current)。
// 这样后续 effect / callback 闭包总能拿到最新的 platform 引用。
useEffect(() => {
platformRef.current = platform;
});
// ======== Google GIS ========
const { scriptLoadedSuccessfully } = useGoogleOAuth();
const pendingGoogleRef = useRef<{ requestId: string } | null>(null);
// 初始化 GIS callback(一次性;GIS 全局只允许一个 id initialize 回调)
useEffect(() => {
if (!scriptLoadedSuccessfully) return;
if (typeof window === "undefined") return;
const gis = window.google?.accounts?.id;
if (!gis) return;
gis.initialize({
client_id: platformRef.current.opts.googleClientId,
callback: (response) => {
const pending = pendingGoogleRef.current;
pendingGoogleRef.current = null;
if (!pending) return;
if (response.credential) {
const decoded = decodeJwtPayload(response.credential);
platformRef.current.resolveGoogle(
pending.requestId,
Result.ok<GoogleCredential>({
idToken: response.credential,
email: decoded?.email ?? null,
displayName: decoded?.name ?? null,
photoUrl: decoded?.picture ?? null,
}),
);
// 全局成功回调
platformRef.current.opts.onGoogleSignInSuccess?.(
response.credential,
decoded?.email ?? null,
);
} else {
platformRef.current.resolveGoogle(
pending.requestId,
Result.err<GoogleCredential>(
new Error("Google sign-in failed: no credential"),
),
);
}
},
});
}, [scriptLoadedSuccessfully]);
// 监听 googleStart 事件 → 触发 prompt
useEffect(() => {
return onAuthEvent(AUTH_EVENTS.googleStart, (detail) => {
pendingGoogleRef.current = { requestId: detail.requestId };
const gis =
typeof window !== "undefined" ? window.google?.accounts?.id : undefined;
if (gis) {
gis.prompt();
} else {
// GIS 未加载完成:立即 reject
pendingGoogleRef.current = null;
platformRef.current.resolveGoogle(
detail.requestId,
Result.err<GoogleCredential>(
new Error("Google Identity Services script not loaded"),
),
);
}
});
}, []);
// ======== Facebook SDK ========
const pendingFacebookRef = useRef<{ requestId: string } | null>(null);
// 初始化 Facebook SDK(一次性)
useEffect(() => {
if (typeof window === "undefined") return;
try {
// 版本联合类型截止 v21.0,但底层 FB JS SDK 支持 v25.0;用类型断言绕过。
FacebookLoginClient.init({
appId: platformRef.current.opts.facebookAppId,
version: (platformRef.current.opts.facebookApiVersion ??
"v25.0") as "v21.0",
cookie: true,
xfbml: true,
});
} catch (e) {
console.warn("[auth] FacebookLoginClient.init failed", e);
}
}, []);
// 监听 facebookStart 事件 → 触发 login
useEffect(() => {
return onAuthEvent(AUTH_EVENTS.facebookStart, (detail) => {
pendingFacebookRef.current = { requestId: detail.requestId };
try {
FacebookLoginClient.login(
(response) => {
const pending = pendingFacebookRef.current;
pendingFacebookRef.current = null;
if (!pending) return;
if (
response.status === LoginStatus.Connected &&
response.authResponse
) {
const expiresIn = Number(response.authResponse.expiresIn);
const expiresAt = Number.isFinite(expiresIn)
? Date.now() + expiresIn * 1000
: null;
platformRef.current.resolveFacebook(
pending.requestId,
Result.ok<FacebookLoginResult>({
status: "success",
accessToken: response.authResponse.accessToken,
userId: response.authResponse.userID,
expiresAt,
}),
);
} else {
// NotAuthorized / Unknown / loginCancelled / facebookNotLoaded
platformRef.current.resolveFacebook(
pending.requestId,
Result.ok<FacebookLoginResult>({
status: "cancelled",
accessToken: "",
userId: "",
expiresAt: null,
}),
);
}
},
{ scope: "public_profile,email" },
);
} catch (e) {
const pending = pendingFacebookRef.current;
pendingFacebookRef.current = null;
if (pending) {
platformRef.current.resolveFacebook(
pending.requestId,
Result.err<FacebookLoginResult>(toError(e)),
);
}
}
});
}, []);
return <>{children}</>;
}
// ======== Helpers ========
/**
* 解码 JWT payload 段。不做签名校验——签名由后端校验。
* 返回 null 表示解码失败。
*/
function decodeJwtPayload(
idToken: string,
): { email?: string; name?: string; picture?: string } | null {
try {
const parts = idToken.split(".");
if (parts.length !== 3) return null;
const payload = parts[1].replace(/-/g, "+").replace(/_/g, "/");
const padded = payload + "=".repeat((4 - (payload.length % 4)) % 4);
const decoded = atob(padded);
return JSON.parse(decoded) as {
email?: string;
name?: string;
picture?: string;
};
} catch {
return null;
}
}
@@ -1,47 +0,0 @@
"use client";
/**
* 跨 plain-TS / React 边界的 DOM 事件通道。
*
* 用途:
* - `WebAuthPlatform`plain TS class,挂在 `getAuthPlatform()` 单例上)dispatch
* `cozsweet:auth:*:start` 事件,并等待 `AuthPlatformBridge`"use client" 组件)
* 调回 `platform.resolveGoogle()` / `platform.resolveFacebook()` 完成 Promise。
* - 这样既满足"接口保持 plain TS、可以被非 React 上下文消费"的需求,又让
* `@react-oauth/google` 的 `GoogleOAuthProvider`(脚本加载)和
* `window.google.accounts.id.*` GIS API 都在 React 侧执行。
*
* 本文件不依赖 React,可以被 `WebAuthPlatform`(无 React 引用)安全 import。
*/
export const AUTH_EVENTS = {
googleStart: "cozsweet:auth:google:start",
facebookStart: "cozsweet:auth:facebook:start",
} as const;
export type AuthEventName = (typeof AUTH_EVENTS)[keyof typeof AUTH_EVENTS];
/** Payload attached to *:start events. */
export interface AuthStartDetail {
readonly requestId: string;
}
export function dispatchAuthEvent(
name: AuthEventName,
detail: AuthStartDetail,
): void {
if (typeof window === "undefined") return;
window.dispatchEvent(new CustomEvent<AuthStartDetail>(name, { detail }));
}
export function onAuthEvent(
name: AuthEventName,
handler: (detail: AuthStartDetail) => void,
): () => void {
if (typeof window === "undefined") return () => {};
const listener = (e: Event) => {
const detail = (e as CustomEvent<AuthStartDetail>).detail;
handler(detail);
};
window.addEventListener(name, listener);
return () => window.removeEventListener(name, listener);
}
-91
View File
@@ -1,91 +0,0 @@
/**
* 第三方登录平台抽象接口 + 工厂 + 单例
*
* 原始 Dart: lib/data/services/auth/auth_platform.dart
*
* 设计:
* - `IAuthPlatform` 是 plain TypeScript 接口(不依赖 React)。
* - 真机实现 `WebAuthPlatform` 通过 DOM 事件与 `AuthPlatformBridge`"use client"
* 组件)通信,由 Bridge 持有 React SDK 钩子。
* - Mock 实现 `MockAuthPlatform` 跳过 SDK,直接返回固定 token。
* - 工厂根据 `NEXT_PUBLIC_USE_MOCK_AUTH` 环境变量二选一(对齐 Dart `kDebugMode`)。
*
* 调用方契约:
* - 平台**只产 token**,不调 `authRepository` / `authApi`。
* - 拿到 `Result<GoogleCredential>` / `Result<FacebookLoginResult>` 后,
* 由调用方自行 `authRepository.googleLogin({ idToken })` 完成登录。
*/
import { Result, type Result as ResultT } from "@/utils/result";
import type { FacebookUserData } from "@/data/dto/auth/facebook_user_data";
import { WebAuthPlatform } from "./web_auth_platform";
import { MockAuthPlatform } from "./mock_auth_platform";
/** 归一化的 Google 凭证(id_token + 解析自 JWT payload 的展示字段)。 */
export interface GoogleCredential {
readonly idToken: string;
readonly email: string | null;
readonly displayName: string | null;
readonly photoUrl: string | null;
}
/** 归一化的 Facebook 登录结果。 */
export interface FacebookLoginResult {
readonly status: "success" | "cancelled" | "error";
readonly accessToken: string;
readonly userId: string;
/** epoch msnull 表示后端未返回 expiresIn。 */
readonly expiresAt: number | null;
}
export interface IAuthPlatform {
/** Google 登录。Web 平台通过 GIS 弹窗流程。 */
googleSignIn(): Promise<ResultT<GoogleCredential>>;
/** 是否支持 Google "authenticate" 流程。Web 平台恒为 false。 */
supportsGoogleAuthenticate(): boolean;
/** Facebook 登录。 */
facebookSignIn(): Promise<ResultT<FacebookLoginResult>>;
/** 拉取 Facebook 用户数据(id / name / email / pictureUrl)。 */
getFacebookUserData(): Promise<ResultT<FacebookUserData>>;
}
export interface IAuthPlatformOptions {
readonly googleClientId: string;
readonly facebookAppId: string;
/** Facebook Graph API 版本,默认 "v25.0"(对齐 Flutter 端)。 */
readonly facebookApiVersion?: string;
/** 全局 Google 登录成功回调(对齐 Dart `onGoogleSignInSuccess`)。 */
readonly onGoogleSignInSuccess?: (
idToken: string,
email: string | null,
) => void;
}
export class AuthPlatformFactory {
private constructor() {}
/**
* 根据 `NEXT_PUBLIC_USE_MOCK_AUTH` 二选一返回平台实现。
* 对齐 Dart `AuthPlatformFactory.create()` 的 `kDebugMode` 分支。
*/
static create(opts: IAuthPlatformOptions): IAuthPlatform {
if (process.env.NEXT_PUBLIC_USE_MOCK_AUTH === "true") {
return new MockAuthPlatform();
}
return new WebAuthPlatform(opts);
}
}
/** 顶层单例(懒加载)。 */
let _instance: IAuthPlatform | null = null;
export function getAuthPlatform(opts: IAuthPlatformOptions): IAuthPlatform {
if (!_instance) _instance = AuthPlatformFactory.create(opts);
return _instance;
}
/** @internal 测试用:重置单例。 */
export function _resetAuthPlatformForTests(): void {
_instance = null;
}
// re-export 让 barrelsby 抓得到
export { Result };
-50
View File
@@ -1,50 +0,0 @@
/**
* 全局类型声明:Google Identity Services (`gis`) 添加的 `window.google` 全局对象。
*
* 由 `<GoogleOAuthProvider>` / `useGoogleOAuth()` 注入的 GIS 脚本会向 `window`
* 挂载 `google.accounts.id` / `google.accounts.oauth2` 等命名空间。本文件让
* TypeScript 知道这些属性的存在,避免在 Bridge 组件中用 `as unknown as ...`
* 强转。
*
* 仅声明我们用到的子集;未列出的 GIS 属性走 `unknown`。
*/
export {};
declare global {
interface Window {
google?: {
accounts?: {
id?: {
initialize(config: {
client_id: string;
callback: (response: { credential?: string }) => void;
auto_select?: boolean;
cancel_on_tap_outside?: boolean;
itp_support?: boolean;
login_hint?: string;
hosted_domain?: string;
use_fedcm_for_prompt?: boolean;
nonce?: string;
state_cookie_domain?: string;
prompt_parent_id?: string;
}): void;
prompt(): void;
renderButton(
parent: HTMLElement,
options: {
type?: "standard" | "icon";
theme?: "outline" | "filled_blue" | "filled_black";
size?: "large" | "medium" | "small";
text?: "signin_with" | "signup_with" | "continue_with" | "signin";
shape?: "rectangular" | "pill" | "circle" | "square";
logo_alignment?: "left" | "center";
width?: string | number;
},
): void;
cancel(): void;
};
oauth2?: unknown;
};
};
}
}
-12
View File
@@ -1,12 +0,0 @@
/**
* @file Automatically generated by barrelsby.
*/
export * from "./auth_bridge_component";
export * from "./auth_event_bridge";
export * from "./auth_platform";
export * from "./global";
export * from "./initialize_facebook_auth";
export * from "./initialize_google_auth";
export * from "./mock_auth_platform";
export * from "./web_auth_platform";
@@ -1,27 +0,0 @@
"use client";
/**
* Facebook SDK 预热辅助。
*
* 原始 Dart: `lib/utils/facebook_auth_initializer.dart` 的 `initializeFacebookAuth()`
*
* 行为:
* - 对齐 Dart `FacebookAuth.i.webAndDesktopInitialize(appId, cookie: true,
* xfbml: true, version: 'v25.0')` 的参数语义。
* - 真实 SDK 初始化(注入 `<div id="facebook-jssdk">` + 调用 `FB.init`)由
* `@greatsumini/react-facebook-login` 的 `FacebookLoginClient.init()` 完成,
* 见 `auth_bridge_component.tsx`。本函数仅做存在性校验 + console.warn。
*/
export function initializeFacebookAuth(
appId: string,
version: string = "v25.0",
): void {
if (typeof window === "undefined") return;
if (!appId) {
console.warn(
"[auth] initializeFacebookAuth: NEXT_PUBLIC_FACEBOOK_APP_ID is not set",
);
}
// version 占位:实际由 FacebookLoginClient.init({ version }) 消费
void version;
}
@@ -1,23 +0,0 @@
"use client";
/**
* Google OAuth 预热辅助。
*
* 原始 Dart: `lib/utils/google_auth_initializer.dart` 的 `initializeGoogleAuth()`
*
* 行为:
* - `@react-oauth/google` 的 `<GoogleOAuthProvider>` 已经负责加载 GIS 脚本;
* 本函数在 script 加载完成时记录一条调试日志(如果 env 缺失则 warn)。
* - 不发起任何网络请求;副作用仅限 console。
*
* 部署:本文件对应 Dart 端 `initializeGoogleAuth()` 调用位点;
* 真实使用时机由调用方在 `useEffect` 中安排,不需要在模块顶层自动执行。
*/
export function initializeGoogleAuth(clientId: string): void {
if (typeof window === "undefined") return;
if (!clientId) {
console.warn(
"[auth] initializeGoogleAuth: NEXT_PUBLIC_GOOGLE_CLIENT_ID is not set",
);
}
}
@@ -1,62 +0,0 @@
"use client";
/**
* 模拟第三方登录平台。
*
* 原始 Dart: lib/data/services/auth/mock_auth_platform.dart
*
* 在 `NEXT_PUBLIC_USE_MOCK_AUTH=true` 时由 `AuthPlatformFactory` 注入。
* 返回固定的 idToken / accessToken / 用户信息,附 250ms 模拟延迟便于观察 loading
* 状态。
*/
import { Result, type Result as ResultT } from "@/utils/result";
import { FacebookUserData } from "@/data/dto/auth/facebook_user_data";
import type {
IAuthPlatform,
GoogleCredential,
FacebookLoginResult,
} from "./auth_platform";
function sleep(ms: number): Promise<void> {
return new Promise((r) => setTimeout(r, ms));
}
export class MockAuthPlatform implements IAuthPlatform {
constructor(private readonly simulatedDelayMs: number = 250) {}
async googleSignIn(): Promise<ResultT<GoogleCredential>> {
await sleep(this.simulatedDelayMs);
return Result.ok({
idToken: `mock_google_id_token_${Date.now()}`,
email: "mock@example.com",
displayName: "Mock User",
photoUrl: "https://via.placeholder.com/150",
});
}
supportsGoogleAuthenticate(): boolean {
return true;
}
async facebookSignIn(): Promise<ResultT<FacebookLoginResult>> {
await sleep(this.simulatedDelayMs);
return Result.ok({
status: "success",
accessToken: `mock_facebook_token_${Date.now()}`,
userId: "mock_facebook_user_id",
expiresAt: Date.now() + 3600_000,
});
}
async getFacebookUserData(): Promise<ResultT<FacebookUserData>> {
await sleep(this.simulatedDelayMs);
return Result.ok(
FacebookUserData.from({
id: "mock_facebook_id",
name: "Mock User",
email: "mock@example.com",
pictureUrl: "https://via.placeholder.com/150",
}),
);
}
}
-195
View File
@@ -1,195 +0,0 @@
"use client";
/**
* Web 平台真机实现。
*
* 原始 Dart: lib/data/services/auth/auth_platform_web.dart
*
* 类本身是 plain TS,不调用 React 钩子;通过 `auth_event_bridge` 派发
* `cozsweet:auth:*:start` 事件,由 `AuthPlatformBridge` 持有 GIS / FB SDK 钩子
* 并在拿到凭证后回调 `platform.resolveGoogle()` / `platform.resolveFacebook()`。
*
* SSR 安全:
* - 构造函数、supportsGoogleAuthenticate() 在 server 端可用;
* - 业务方法在 SSR 下直接返回 failure(与 Flutter WebAuthPlatform 一致:
* 必须由用户点击触发弹窗,服务器侧无法完成 OAuth)。
*/
import { Result, toError, type Result as ResultT } from "@/utils/result";
import { FacebookUserData } from "@/data/dto/auth/facebook_user_data";
import {
AUTH_EVENTS,
dispatchAuthEvent,
} from "./auth_event_bridge";
import type {
IAuthPlatform,
IAuthPlatformOptions,
GoogleCredential,
FacebookLoginResult,
} from "./auth_platform";
const TIMEOUT_MS = 5 * 60 * 1000;
interface PendingResolver<T> {
resolve: (r: ResultT<T>) => void;
}
export class WebAuthPlatform implements IAuthPlatform {
readonly opts: IAuthPlatformOptions;
private readonly pendingGoogle = new Map<
string,
PendingResolver<GoogleCredential>
>();
private readonly pendingFacebook = new Map<
string,
PendingResolver<FacebookLoginResult>
>();
private nextId = 0;
constructor(opts: IAuthPlatformOptions) {
this.opts = opts;
}
/** 由 AuthPlatformBridge 在拿到 GIS 凭证后回调。 */
resolveGoogle(
requestId: string,
result: ResultT<GoogleCredential>,
): void {
const pending = this.pendingGoogle.get(requestId);
if (pending) {
pending.resolve(result);
this.pendingGoogle.delete(requestId);
}
}
/** 由 AuthPlatformBridge 在拿到 FB login response 后回调。 */
resolveFacebook(
requestId: string,
result: ResultT<FacebookLoginResult>,
): void {
const pending = this.pendingFacebook.get(requestId);
if (pending) {
pending.resolve(result);
this.pendingFacebook.delete(requestId);
}
}
async googleSignIn(): Promise<ResultT<GoogleCredential>> {
if (typeof window === "undefined") {
return Result.err(new Error("googleSignIn requires a browser"));
}
if (!this.opts.googleClientId) {
return Result.err(
new Error("NEXT_PUBLIC_GOOGLE_CLIENT_ID is not set"),
);
}
const requestId = this.allocId();
return new Promise<ResultT<GoogleCredential>>((resolve) => {
this.pendingGoogle.set(requestId, { resolve });
dispatchAuthEvent(AUTH_EVENTS.googleStart, { requestId });
setTimeout(() => {
if (this.pendingGoogle.has(requestId)) {
this.pendingGoogle.delete(requestId);
resolve(Result.err(new Error("Google sign-in timed out")));
}
}, TIMEOUT_MS);
});
}
/**
* Web 平台使用 GIS 弹窗流程,`google.accounts.id.prompt()`,不调用
* "authenticate" API。返回 false 以对齐 Dart `WebAuthPlatform` 行为。
*/
supportsGoogleAuthenticate(): boolean {
return false;
}
async facebookSignIn(): Promise<ResultT<FacebookLoginResult>> {
if (typeof window === "undefined") {
return Result.err(new Error("facebookSignIn requires a browser"));
}
if (!this.opts.facebookAppId) {
return Result.err(
new Error("NEXT_PUBLIC_FACEBOOK_APP_ID is not set"),
);
}
const requestId = this.allocId();
return new Promise<ResultT<FacebookLoginResult>>((resolve) => {
this.pendingFacebook.set(requestId, { resolve });
dispatchAuthEvent(AUTH_EVENTS.facebookStart, { requestId });
setTimeout(() => {
if (this.pendingFacebook.has(requestId)) {
this.pendingFacebook.delete(requestId);
resolve(Result.err(new Error("Facebook sign-in timed out")));
}
}, TIMEOUT_MS);
});
}
/**
* 拉取 Facebook 用户数据。
*
* 与 Dart `WebAuthPlatform.getFacebookUserData()` 对齐:调用 FB JS SDK 的
* `FB.api('/me', { fields })`。前提是 Bridge 已经 `FacebookLoginClient.init`
* 初始化过 SDK`window.FB` 全局存在)。若 SDK 未加载则返回 failure。
*/
async getFacebookUserData(): Promise<ResultT<FacebookUserData>> {
if (typeof window === "undefined") {
return Result.err(
new Error("getFacebookUserData requires a browser"),
);
}
const FB = (window as unknown as { FB?: unknown }).FB;
if (!FB) {
return Result.err(
new Error(
"Facebook SDK not loaded; call facebookSignIn() first or mount <AuthPlatformBridge>",
),
);
}
return new Promise<ResultT<FacebookUserData>>((resolve) => {
try {
(window as unknown as {
FB: {
api: (
path: string,
params: Record<string, string>,
cb: (resp: Record<string, unknown>) => void,
) => void;
};
}).FB.api(
"/me",
{ fields: "id,name,email,picture" },
(resp) => {
if (!resp || (resp as { error?: unknown }).error) {
resolve(Result.err(new Error("FB.api /me failed")));
return;
}
const r = resp as {
id?: string;
name?: string;
email?: string;
picture?: { data?: { url?: string } };
};
resolve(
Result.ok(
FacebookUserData.from({
id: r.id ?? null,
name: r.name ?? null,
email: r.email ?? null,
pictureUrl: r.picture?.data?.url ?? null,
}),
),
);
},
);
} catch (e) {
resolve(Result.err(toError(e)));
}
});
}
private allocId(): string {
this.nextId += 1;
return `auth-${Date.now()}-${this.nextId}`;
}
}
+1 -8
View File
@@ -14,14 +14,7 @@ export * from "../../core/net/config/api_config";
export * from "./api/interceptor/auth_refresh_interceptor";
export * from "./api/interceptor/logging_interceptor";
export * from "./api/interceptor/token_interceptor";
export * from "./auth/auth_bridge_component";
export * from "./auth/auth_event_bridge";
export * from "./auth/auth_platform";
export * from "./auth/global";
export * from "./auth/initialize_facebook_auth";
export * from "./auth/initialize_google_auth";
export * from "./auth/mock_auth_platform";
export * from "./auth/web_auth_platform";
// 注:原 ./auth/* 平台适配层已删除(社交登录改由 NextAuth 处理)
export * from "../dto/auth/apple_login_request";
export * from "../dto/auth/facebook_login_request";
export * from "../dto/auth/facebook_user_data";
-39
View File
@@ -1,39 +0,0 @@
/**
* Facebook SDK
*/
export {};
declare global {
interface Window {
FB?: {
init(params: {
appId: string;
cookie?: boolean;
xfbml?: boolean;
version: string;
}): void;
login(
callback: (response: {
authResponse?: {
accessToken: string;
userID: string;
expiresIn: number;
};
status?: "connected" | "not_authorized" | "unknown";
}) => void,
options?: { scope: string },
): void;
logout(callback?: () => void): void;
api(
path: string,
callback: (response: {
id?: string;
name?: string;
email?: string;
picture?: { data?: { url?: string } };
}) => void,
): void;
};
fbAsyncInit?: () => void;
}
}
-147
View File
@@ -1,147 +0,0 @@
/**
* Facebook SDK JS
*
* Dart: `flutter_facebook_auth`
* `lib/data/services/auth/auth_platform.dart` + `auth_screen.dart` Facebook
*
*
* 1. `app/layout.tsx` `<Script src="https://connect.facebook.net/en_US/sdk.js">`
* 2. `FB.login` / `FB.getUserData` OAuth +
* 3. TypeScript `facebook-sdk.d.ts``window.FB`
*/
import { Result } from "@/utils/result";
declare global {
interface Window {
FB?: {
init(params: {
appId: string;
cookie?: boolean;
xfbml?: boolean;
version: string;
}): void;
login(
callback: (response: {
authResponse?: {
accessToken: string;
userID: string;
expiresIn: number;
};
status?: "connected" | "not_authorized" | "unknown";
}) => void,
options?: { scope: string },
): void;
logout(callback?: () => void): void;
api(
path: string,
callback: (response: {
id?: string;
name?: string;
email?: string;
picture?: { data?: { url?: string } };
}) => void,
): void;
};
fbAsyncInit?: () => void;
}
}
export interface FacebookUserData {
id: string;
name?: string;
email?: string;
pictureUrl?: string;
}
const FB_APP_ID = process.env.NEXT_PUBLIC_FACEBOOK_APP_ID ?? "";
const FB_VERSION = process.env.NEXT_PUBLIC_FACEBOOK_API_VERSION ?? "v18.0";
/**
* FB SDK `window.fbAsyncInit`
* `app/layout.tsx` inline script
*/
export function initFacebookSdk(): void {
if (typeof window === "undefined" || !window.FB) return;
window.FB.init({
appId: FB_APP_ID,
cookie: true,
xfbml: false,
version: FB_VERSION,
});
}
/**
* Facebook OAuth
* - `{ accessToken, userId }`
* - / `Result.err`
*/
export async function loginWithFacebook(): Promise<
Result<{ accessToken: string; userId: string }>
> {
if (typeof window === "undefined" || !window.FB) {
return Result.err(new Error("Facebook SDK not loaded"));
}
return new Promise((resolve) => {
window.FB!.login(
(response) => {
if (!response.authResponse) {
resolve(
Result.err(new Error("Facebook login cancelled or failed")),
);
return;
}
resolve(
Result.ok({
accessToken: response.authResponse.accessToken,
userId: response.authResponse.userID,
}),
);
},
{ scope: "email,public_profile" },
);
});
}
/**
* Facebook
*/
export async function getFacebookUserData(): Promise<
Result<FacebookUserData>
> {
if (typeof window === "undefined" || !window.FB) {
return Result.err(new Error("Facebook SDK not loaded"));
}
return new Promise((resolve) => {
window.FB!.api("/me", (response) => {
if (!response.id) {
resolve(Result.err(new Error("No Facebook user data")));
return;
}
// 单独拉取头像
window.FB!.api(
"/me/picture?type=large&redirect=false",
(picResp: unknown) => {
const url =
picResp &&
typeof picResp === "object" &&
"data" in picResp &&
picResp.data &&
typeof picResp.data === "object" &&
"url" in picResp.data &&
typeof picResp.data.url === "string"
? picResp.data.url
: undefined;
resolve(
Result.ok({
id: response.id!,
name: response.name!,
email: response.email!,
pictureUrl: url,
}),
);
},
);
});
});
}
-36
View File
@@ -1,36 +0,0 @@
/**
* Google Identity Services
*/
export {};
declare global {
interface Window {
google?: {
accounts: {
id: {
initialize(params: {
client_id: string;
callback: (response: { credential?: string; select_by?: string }) => void;
auto_select?: boolean;
cancel_on_tap_outside?: boolean;
}): void;
prompt(): void;
renderButton(
parent: HTMLElement,
options: {
type?: "standard" | "icon";
theme?: "outline" | "filled_blue" | "filled_black";
size?: "large" | "medium" | "small";
text?: "signin_with" | "signup_with" | "continue_with" | "signin";
shape?: "rectangular" | "pill" | "circle" | "square";
logo_alignment?: "left" | "center";
width?: number;
locale?: string;
},
): void;
disableAutoSelect(): void;
};
};
};
}
}
-72
View File
@@ -1,72 +0,0 @@
/**
* Google Identity Services (GIS)
*
* Dart: `google_sign_in_web`
* `lib/ui/auth/widgets/google_sign_in_web.dart` + `auth_bloc._onWebGoogleLoginSuccess`
*
*
* 1. `<Script src="https://accounts.google.com/gsi/client">` layout
* 2. `renderButton(element, options)` GIS OAuth
* 3. callback `onGoogleSignInSuccess(idToken, email)`
* 4. idToken `authRepository.googleLogin`
*
* `google.accounts.id` `google-identity.d.ts`
*/
import { Result } from "@/utils/result";
export interface GoogleSignInSuccess {
idToken: string;
email: string;
}
let _onSuccess: ((s: GoogleSignInSuccess) => void) | null = null;
/** 设置全局成功回调(auth screen 在 mount 时设置,unmount 时清空)。 */
export function setOnGoogleSignInSuccess(
cb: ((s: GoogleSignInSuccess) => void) | null,
): void {
_onSuccess = cb;
}
/** 渲染 GIS 按钮到指定 DOM 元素。 */
export function renderGoogleButton(
element: HTMLElement,
options: { theme?: "outline" | "filled_blue" | "filled_black"; size?: "large" | "medium" | "small"; text?: "signin_with" | "signup_with" | "continue_with" | "signin" } = {},
): void {
if (typeof window === "undefined" || !window.google?.accounts?.id) return;
window.google.accounts.id.renderButton(element, {
type: "standard",
theme: options.theme ?? "outline",
size: options.size ?? "large",
text: options.text ?? "continue_with",
shape: "pill",
width: element.clientWidth || 320,
});
}
/** 触发 GIS One Tap 提示(如果用户已登录过 Google)。 */
export function promptGoogleOneTap(): Result<true> {
if (typeof window === "undefined" || !window.google?.accounts?.id) {
return Result.err(new Error("Google Identity Services not loaded"));
}
window.google.accounts.id.prompt();
return Result.ok(true);
}
/** 处理 GIS 凭据回调(由 GIS 内部调用)。 */
export function handleGoogleCredentialResponse(
response: { credential?: string; select_by?: string },
): Result<GoogleSignInSuccess> {
if (!response.credential) {
return Result.err(new Error("No Google credential returned"));
}
// GIS 凭据是 JWT;本仓库不解析(idToken 直接交给后端校验),
// email 字段需前端手动解码或由后端从 idToken 提取。
// 此处仅返回 idTokenemail 留空(后端会从 idToken 还原)。
const success: GoogleSignInSuccess = {
idToken: response.credential,
email: "",
};
_onSuccess?.(success);
return Result.ok(success);
}
-4
View File
@@ -4,9 +4,5 @@
export * from "./browser-detect";
export * from "./chat-websocket";
export * from "./facebook-sdk";
export * from "./facebook-sdk";
export * from "./google-identity";
export * from "./google-identity";
export * from "./media-recorder";
export * from "./message-queue";
+129
View File
@@ -0,0 +1,129 @@
/**
* NextAuth
*
* OAuth providersGoogle + Facebook+ session +
* `src/app/api/auth/[...nextauth]/route.ts`
*
* Session **JWT**token / next-auth
* token `signIn` callback unstorage `StorageKeys.loginToken`
*/
import type { NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import FacebookProvider from "next-auth/providers/facebook";
const useSecureCookies = process.env.NODE_ENV === "production";
const cookiePrefix = useSecureCookies ? "__Secure-" : "";
const cookieConfig = {
// 默认 cookie 名(next-auth v4 默认)
sessionToken: {
name: `${cookiePrefix}next-auth.session-token`,
options: {
httpOnly: true,
sameSite: "lax" as const,
path: "/",
secure: useSecureCookies,
},
},
};
export const authOptions: NextAuthOptions = {
// ===== Providers =====
providers: [
GoogleProvider({
clientId: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID ?? "",
clientSecret: process.env.GOOGLE_CLIENT_SECRET ?? "",
}),
FacebookProvider({
clientId: process.env.NEXT_PUBLIC_FACEBOOK_APP_ID ?? "",
clientSecret: process.env.FACEBOOK_APP_SECRET ?? "",
}),
],
// ===== Session =====
session: { strategy: "jwt" },
// ===== Cookie =====
cookies: cookieConfig,
// ===== Pages =====
// OAuth 流程中 NextAuth 重定向到这些路径
pages: {
signIn: "/auth",
error: "/auth",
},
// ===== Callbacks =====
callbacks: {
/**
* unstorage +
* token `jwt` callback
*/
async signIn({ user, account, profile }) {
if (!account || !user) return false;
// 仅对 OAuth provider 触发后端同步(credentials provider 走 emailLogin 流程)
if (account.provider === "google" || account.provider === "facebook") {
// 通过 dynamic import 避免循环依赖 + SSR 时不加载
const { handleSocialSignIn } = await import("./nextauth-helpers");
const result = await handleSocialSignIn({
provider: account.provider,
user,
account,
profile,
});
return result;
}
return true;
},
/**
* JWT callback token loginTokenuserId
* `useSession().data`
*/
async jwt({ token, user, account }) {
if (user && account) {
// 首次登录时,从 signIn callback 写入的 unstorage 读取
if (account.provider === "google" || account.provider === "facebook") {
const { getSocialSession } = await import("./nextauth-helpers");
const session = await getSocialSession();
if (session) {
token.loginToken = session.loginToken;
token.refreshToken = session.refreshToken;
token.userId = session.userId;
token.provider = account.provider;
}
}
}
return token;
},
/**
* Session callback JWT `useSession()`
*/
async session({ session, token }) {
if (session.user) {
(session as unknown as Record<string, unknown>).loginToken =
token.loginToken;
(session as unknown as Record<string, unknown>).userId = token.userId;
(session as unknown as Record<string, unknown>).provider =
token.provider;
}
return session;
},
},
// ===== Secret =====
secret: process.env.NEXTAUTH_SECRET ?? "dev-secret-change-in-prod",
};
/**
* next-auth Session
*/
declare module "next-auth" {
interface Session {
loginToken?: string;
userId?: string;
provider?: string;
}
}
+181
View File
@@ -0,0 +1,181 @@
/**
* NextAuth helpers
*
* OAuth "业务层同步"
* 1. Google/Facebook OAuth NextAuth user/account/profile
* 2. idToken / accessToken `authRepository.googleLogin` / `facebookLogin`
* 3. `LoginResponse` token + user
* 4. unstorage + NextAuth JWT
*
* `useAuthGate()` API `useSession()`
*/
import { useSession } from "next-auth/react";
import type { Account, Profile, User } from "next-auth";
import { authRepository } from "@/data/repositories/auth_repository";
import { SpAsyncUtil } from "@/utils/storage";
import { Result } from "@/utils/result";
import { StorageKeys } from "@/data/storage/storage_keys";
/** 暴露给外部的:Google 登录 */
export async function googleLogin(): Promise<Result<{ isNewUser: boolean }>> {
// NextAuth 在客户端通过 signIn() 触发跳转;服务端场景下可通过 POST /api/auth/signin/google
// 本函数封装整个流程:触发 NextAuth OAuth → 后端同步 → 返回业务 session
const { signIn } = await import("next-auth/react");
const result = await signIn("google", {
redirect: false,
callbackUrl: "/chat",
});
if (!result || result.error) {
return Result.err(new Error(result?.error ?? "Google sign-in failed"));
}
return Result.ok({ isNewUser: false });
}
/** 暴露给外部的:Facebook 登录 */
export async function facebookLogin(): Promise<Result<{ isNewUser: boolean }>> {
const { signIn } = await import("next-auth/react");
const result = await signIn("facebook", {
redirect: false,
callbackUrl: "/chat",
});
if (!result || result.error) {
return Result.err(new Error(result?.error ?? "Facebook sign-in failed"));
}
return Result.ok({ isNewUser: false });
}
/** 暴露给外部的:登出 */
export async function logout(): Promise<Result<void>> {
const { signOut } = await import("next-auth/react");
await signOut({ redirect: false });
// 清理业务层 token
await SpAsyncUtil.remove(StorageKeys.loginToken);
await SpAsyncUtil.remove(StorageKeys.refreshToken);
return Result.ok(undefined);
}
// ============================================================
// 内部:signIn callback 用的业务层同步
// ============================================================
interface SocialSignInInput {
provider: string;
user: User;
account: Account;
profile?: Profile;
}
/**
* OAuth
* unstorage token+ NextAuth session
*
* `true` NextAuth `false`
*/
export async function handleSocialSignIn(
input: SocialSignInInput,
): Promise<boolean> {
try {
const guestId = await readGuestId();
if (input.provider === "google") {
// GoogleNextAuth 拿到的 idToken 来自 account.id_token
const idToken = input.account.id_token;
if (!idToken) {
console.error("[nextauth-helpers] Google id_token missing");
return false;
}
const email = input.user.email ?? "";
const result = await authRepository.googleLogin({ idToken, guestId });
if (Result.isErr(result)) {
console.error("[nextauth-helpers] Google backend login failed", result.error);
return false;
}
await persistBackendSession(result.data);
return true;
}
if (input.provider === "facebook") {
// FacebookaccessToken 来自 account.access_token
const accessToken = input.account.access_token;
if (!accessToken) {
console.error("[nextauth-helpers] Facebook access_token missing");
return false;
}
const result = await authRepository.facebookLogin({ accessToken, guestId });
if (Result.isErr(result)) {
console.error("[nextauth-helpers] Facebook backend login failed", result.error);
return false;
}
await persistBackendSession(result.data);
return true;
}
return false;
} catch (e) {
console.error("[nextauth-helpers] social sign-in error", e);
return false;
}
}
interface SocialSession {
loginToken: string;
refreshToken?: string;
userId: string;
}
/**
* LoginResponse NextAuth 访
* jwt callback
*/
async function persistBackendSession(data: {
token: string;
refreshToken?: string;
user: { id: string };
}): Promise<void> {
await SpAsyncUtil.setString(StorageKeys.loginToken, data.token);
if (data.refreshToken) {
await SpAsyncUtil.setString(StorageKeys.refreshToken, data.refreshToken);
}
// userId 写入 unstorage(其他业务模块通过 useUserState 读)
await SpAsyncUtil.setString(StorageKeys.userId, data.user.id);
}
export async function getSocialSession(): Promise<SocialSession | null> {
// 从 unstorage 读取(之前 persistBackendSession 写入的)
const tokenR = await SpAsyncUtil.getString(StorageKeys.loginToken);
const userIdR = await SpAsyncUtil.getString(StorageKeys.userId);
const refreshR = await SpAsyncUtil.getString(StorageKeys.refreshToken);
if (!tokenR.success || !tokenR.data || !userIdR.success || !userIdR.data) {
return null;
}
return {
loginToken: tokenR.data,
userId: userIdR.data,
refreshToken: refreshR.success ? refreshR.data ?? undefined : undefined,
};
}
// ============================================================
// 客户端鉴权门 hook(保持原 useAuthGate 形状,内部用 useSession
// ============================================================
export interface AuthGateState {
isAuthed: boolean;
}
export function useAuthGate(): AuthGateState {
const { data: session } = useSession();
return { isAuthed: Boolean(session?.user) };
}
// ============================================================
// 内部 helpers
// ============================================================
async function readGuestId(): Promise<string | undefined> {
const r = await SpAsyncUtil.getString(StorageKeys.deviceId);
if (r.success && r.data != null && r.data.length > 0) {
return r.data;
}
return undefined;
}
+27
View File
@@ -0,0 +1,27 @@
/**
* NextAuth
*
*
* - `googleLogin()` Google OAuth
* - `facebookLogin()` Facebook OAuth
*
* splash-button / auth-facebook-panel / splash-screen
* ```ts
* import { googleLogin, facebookLogin, useAuthGate } from "@/lib/auth/nextauth";
*
* const r = await googleLogin();
* if (r.success) { ... }
* ```
*
*
* - `useAuthGate()` API hook
* - `useSession()`NextAuth API
* - `nextauth-helpers.handleSocialSignIn` NextAuth signIn callback
*/
export {
googleLogin,
facebookLogin,
logout,
useAuthGate,
type AuthGateState,
} from "./nextauth-helpers";
-36
View File
@@ -1,36 +0,0 @@
/**
*
*
* React/Next.js `src/proxy.ts`
* `src/lib/auth/use-auth-gate.tsx` hook
*
* Flutter `lib/router/app_router.dart` `_handleAuthRedirect`
* 访 `/splash` `/auth` `/chat`
*/
import { AUTH_ONLY_ROUTES, ROUTES, type StaticRoute } from "../routes";
/**
* "仅未登录态可见"
*/
export function isAuthOnlyRoute(pathname: string): pathname is StaticRoute {
return (AUTH_ONLY_ROUTES as readonly string[]).includes(pathname);
}
/**
* 访
*/
export function isPublicRoute(pathname: string): pathname is StaticRoute {
return pathname === ROUTES.chat || pathname === ROUTES.sidebar;
}
/**
* 访 null
*
* "splash/auth → chat" onboarding
*
*/
export function resolveAuthedRedirect(pathname: string): string | null {
if (isAuthOnlyRoute(pathname)) return ROUTES.chat;
return null;
}
-56
View File
@@ -1,56 +0,0 @@
"use client";
/**
* hook
*
* = `window.localStorage[StorageKeys.loginToken]`
* Context/Zustand splash/auth 使 hook
*
* React 19 / Next.js 16
* - `useSyncExternalStore` `useEffect + setState` React 19
* `react-hooks/set-state-in-effect`
* - `getServerSnapshot` `false` SSR
* React `getSnapshot()`localStorage
* `useEffect([isAuthed], ...)` "已登录"
* - subscribe no-oplocalStorage
* navigation splash
*
* 使
* const { isAuthed } = useAuthGate();
* useEffect(() => { if (isAuthed) router.replace(ROUTES.chat); }, [isAuthed]);
* if (!isAuthed) return <Placeholder />; // SSR / 水合首帧 / 未登录 都会落在这
*
* `ready` `useSyncExternalStore` SSR /
* `false` SSR ready
*
* `window.localStorage` `useSyncExternalStore.getSnapshot`
* `AuthStorage.hasLoginToken()` async使
*/
import { useSyncExternalStore } from "react";
import { StorageKeys } from "@/data/storage/storage_keys";
export interface AuthGateState {
/** 已登录(持有非空 `cozsweet.loginToken` */
isAuthed: boolean;
}
// 静态 subscribelocalStorage 在本应用生命周期内不会主动变化。
const subscribe = (): (() => void) => () => {};
/**
* localStorage login_token `AuthStorage.hasLoginToken`
*/
const getSnapshot = (): boolean => {
if (typeof window === "undefined") return false;
const token = window.localStorage.getItem(StorageKeys.loginToken);
return token !== null && token.length > 0;
};
const getServerSnapshot = (): boolean => false;
export function useAuthGate(): AuthGateState {
const isAuthed = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
return { isAuthed };
}
+3 -3
View File
@@ -1,10 +1,10 @@
/**
* `src/lib/` barrel
*
* **** `src/lib/auth/use-auth-gate.tsx`Client-only
* **** `src/lib/auth/nextauth.ts`Client-only
* Server bundle React
* hook `import { useAuthGate } from "@/lib/auth/use-auth-gate";`
* `import { ... } from "@/lib/auth/nextauth";`
*/
export * from "./routes";
export * from "./auth/route-guards";
export * from "./auth/nextauth-helpers";
+28 -20
View File
@@ -2,17 +2,15 @@
* Next.js 16 Proxy `middleware.ts`
*
*
* - `login_token` cookie `/splash` `/auth` 308 `/chat`
* - NextAuth `next-auth.session-token` cookie `/splash` `/auth`
* 308 `/chat`
* - `NextResponse.next()`
*
*
* - **** `/chat` `auth_refresh_interceptor`
* tokenproxy `guest_token`
* - `login_token` cookie token localStorageproxy no-op
* 便 HttpOnly Cookie `src/data/storage/auth/auth_storage.ts`
* TODO proxy
* - ** localStorage** Client
* `useAuthGate` + `authStorage.hasLoginToken()`proxy CDN "乐观"
* - **** `/chat`
* - NextAuth session cookie `src/lib/auth/config.ts` proxy
* CDN "乐观"
* - Client `useAuthGate()` `useSession()`
*
* Next 16 `node_modules/next/dist/docs/01-app/03-api-reference/03-file-conventions/proxy.md`
* - `middleware.ts` `proxy.ts``middleware` deprecated
@@ -25,26 +23,36 @@
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import { resolveAuthedRedirect } from "@/lib/auth/route-guards";
import {
AUTH_ONLY_ROUTES,
ROUTES,
type StaticRoute,
} from "@/lib/routes";
const LOGIN_COOKIE = "login_token";
const SESSION_COOKIE_NAMES = [
"next-auth.session-token",
"__Secure-next-auth.session-token",
];
function isAuthOnlyRoute(pathname: string): pathname is StaticRoute {
return (AUTH_ONLY_ROUTES as readonly string[]).includes(pathname);
}
/**
* Proxy
*/
export function proxy(request: NextRequest) {
const { pathname } = request.nextUrl;
const hasLoginCookie = Boolean(request.cookies.get(LOGIN_COOKIE)?.value);
if (hasLoginCookie) {
const target = resolveAuthedRedirect(pathname);
if (target) {
const url = request.nextUrl.clone();
url.pathname = target;
// 308 = 永久。注销后若浏览器/CDN 缓存了 308,可能黏住。
// 若担心可改 307(临时);本轮按 plan 口径用 308 并在 plan 中记录风险。
return NextResponse.redirect(url, 308);
}
// 检查 NextAuth session cookie 存在性(cookie value 存在即认为已登录)
const hasSession = SESSION_COOKIE_NAMES.some(
(name) => Boolean(request.cookies.get(name)?.value),
);
if (hasSession && isAuthOnlyRoute(pathname)) {
const url = request.nextUrl.clone();
url.pathname = ROUTES.chat;
return NextResponse.redirect(url, 308);
}
return NextResponse.next();
+2 -3
View File
@@ -55,10 +55,9 @@ export function AuthProvider({ children }: AuthProviderProps) {
password: state.context.password,
username: state.context.username,
confirmPassword: state.context.confirmPassword,
// isLoading 仅来自邮箱登录 actor(社交登录改由 NextAuth 处理,UI 自行管 busy 状态)
isLoading: state.matches("loadingEmailLogin") ||
state.matches("loadingEmailRegister") ||
state.matches("loadingFacebookLogin") ||
state.matches("loadingWebGoogleLogin"),
state.matches("loadingEmailRegister"),
errorMessage: state.context.errorMessage,
isSuccess: state.matches("success"),
loginType: state.context.loginType,
+8 -102
View File
@@ -3,11 +3,8 @@
*
* Dart: lib/ui/auth/bloc/auth_bloc.dart + auth_state.dart + auth_event.dart
*
*
* - 使 XState v5 `setup({...}).createMachine({...})` API
* - `fromPromise` actor
* - `context`UI
* - Dart 便
* NextAuth `@/lib/auth/nextauth`
* / + reset `await nextauth.googleLogin()`
*/
import { setup, fromPromise, assign } from "xstate";
@@ -16,10 +13,6 @@ import type { AuthPanelMode } from "@/models/auth/auth-panel-mode";
import type { LoginType } from "@/models/auth/login-type";
import { authRepository } from "@/data/repositories/auth_repository";
import { AuthStorage } from "@/data/storage/auth/auth_storage";
import {
loginWithFacebook,
getFacebookUserData,
} from "@/integrations/facebook-sdk";
import { Result } from "@/utils/result";
// ============================================================
@@ -67,18 +60,14 @@ export type AuthEvent =
username: string;
confirmPassword: string;
}
// 社交登录(已迁移到 NextAuth)— 业务层直接 await nextauth.googleLogin() 即可
| { type: "AuthGoogleLoginSubmitted" }
| { type: "AuthFacebookLoginSubmitted" }
| { type: "AuthAppleLoginSubmitted" }
| { type: "AuthWebGoogleLoginSuccess"; idToken: string; email: string };
| { type: "AuthAppleLoginSubmitted" };
// ============================================================
// Helpers
// ============================================================
/**
* guestId undefined
* if TS narrowing
*/
async function readGuestId(): Promise<string | undefined> {
const r = await AuthStorage.getInstance().getDeviceId();
if (r.success && r.data != null) {
@@ -118,37 +107,6 @@ const emailRegisterThenLoginActor = fromPromise<
return "email" as LoginType;
});
const googleLoginActor = fromPromise<LoginType, { idToken: string }>(async ({ input }) => {
const guestId = await readGuestId();
const result = await authRepository.googleLogin({ idToken: input.idToken, guestId });
if (Result.isErr(result)) throw result.error;
return "google" as LoginType;
});
const facebookLoginActor = fromPromise<LoginType, Record<string, never>>(
async () => {
const guestId = await readGuestId();
const fbResult = await loginWithFacebook();
if (Result.isErr(fbResult)) throw fbResult.error;
const authResult = await authRepository.facebookLogin({
accessToken: fbResult.data.accessToken,
guestId,
});
if (Result.isErr(authResult)) throw authResult.error;
// best-effort:异步上传 Facebook 头像
void (async () => {
const userData = await getFacebookUserData();
if (Result.isOk(userData) && userData.data.pictureUrl) {
// TODO: 调用 userStorage.setAvatarUrl
}
})();
return "facebook" as LoginType;
},
);
// ============================================================
// Machine
// ============================================================
@@ -160,8 +118,6 @@ export const authMachine = setup({
actors: {
emailLogin: emailLoginActor,
emailRegisterThenLogin: emailRegisterThenLoginActor,
googleLogin: googleLoginActor,
facebookLogin: facebookLoginActor,
},
}).createMachine({
id: "auth",
@@ -196,18 +152,15 @@ export const authMachine = setup({
},
AuthEmailLoginSubmitted: "loadingEmailLogin",
AuthEmailRegisterSubmitted: "loadingEmailRegister",
AuthGoogleLoginSubmitted: {
actions: assign({
errorMessage: "Use the Google button to sign in on web",
}),
},
AuthFacebookLoginSubmitted: "loadingFacebookLogin",
// 社交登录已迁移到 NextAuth,业务层直接 await nextauth.googleLogin() / nextauth.facebookLogin()
// 状态机保留事件以兼容旧调用方(实际不再触发)
AuthGoogleLoginSubmitted: {},
AuthFacebookLoginSubmitted: {},
AuthAppleLoginSubmitted: {
actions: assign({
errorMessage: "Apple login not implemented",
}),
},
AuthWebGoogleLoginSuccess: "loadingWebGoogleLogin",
},
},
@@ -266,55 +219,8 @@ export const authMachine = setup({
},
},
loadingFacebookLogin: {
invoke: {
src: "facebookLogin",
input: () => ({}),
onDone: {
target: "success",
actions: assign({
loginType: ({ event }) => event.output,
errorMessage: null,
}),
},
onError: {
target: "idle",
actions: assign({
errorMessage: ({ event }) =>
event.error instanceof Error ? event.error.message : String(event.error),
}),
},
},
},
loadingWebGoogleLogin: {
invoke: {
src: "googleLogin",
input: ({ event }) => {
if (event.type !== "AuthWebGoogleLoginSuccess")
return { idToken: "" };
return { idToken: event.idToken };
},
onDone: {
target: "success",
actions: assign({
loginType: ({ event }) => event.output,
errorMessage: null,
}),
},
onError: {
target: "idle",
actions: assign({
errorMessage: ({ event }) =>
event.error instanceof Error ? event.error.message : String(event.error),
}),
},
},
},
success: {
// 终态:业务层通过 state.matches("success") 判断
// isSuccess 由 context 推算(loginType !== "none"
},
},
});