Next.js 14集成Amplify Google登录遇307状态码问题求助

307临时重定向在Amplify OAuth登录流程中，通常是路由拦截、回调URL配置不匹配或Amplify初始化逻辑错误导致的，以下是针对性的排查和解决步骤：

1. 核对Amplify Console OAuth配置 #

• 确认回调URL和退出URL与你的Next.js项目域名完全一致：开发环境需包含http://localhost:3000，生产环境需填写实际部署域名，注意区分http/https、末尾斜杠等细节，不能有拼写错误。
• 确保OAuth授权范围已勾选openid、email等必要权限。

2. 修正Next.js Middleware路由拦截规则 #

如果你的middleware.ts对未认证用户做了全局重定向，必须排除Amplify的OAuth回调路径，否则会触发307重定向：

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // 放行登录页和OAuth回调路径
  const publicPaths = ['/login', '/auth/callback/google'];
  if (publicPaths.includes(request.nextUrl.pathname)) {
    return NextResponse.next();
  }

  // 其余未认证路由重定向到登录页的逻辑
  const isAuthenticated = /* 你的认证判断逻辑 */;
  if (!isAuthenticated) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
}

3. 确保Amplify在客户端组件中正确初始化 #

Next.js 14 App Router中，服务器组件无法调用Amplify客户端API，需将初始化逻辑放在客户端组件中：

// app/providers.tsx (客户端组件)
'use client';
import { Amplify } from 'aws-amplify';
import amplifyconfig from '@/amplifyconfiguration.json';

// 开启SSR支持
Amplify.configure(amplifyconfig, { ssr: true });

export function Providers({ children }: { children: React.ReactNode }) {
  return <>{children}</>;
}

然后在根layout.tsx中导入并包裹子组件：

// app/layout.tsx
import { Providers } from './providers';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

4. 检查登录组件与回调页面代码 #

登录组件（需为客户端组件） #

确保使用Amplify v6的signInWithRedirect方法触发Google登录：

// app/login/page.tsx
'use client';
import { signInWithRedirect, socialProviders } from 'aws-amplify/auth';

export default function LoginPage() {
  const handleGoogleLogin = async () => {
    try {
      await signInWithRedirect({ provider: socialProviders.GOOGLE });
    } catch (error) {
      console.error('登录失败:', error);
    }
  };

  return (
    <div>
      <button onClick={handleGoogleLogin}>使用Google登录</button>
    </div>
  );
}

回调页面（必须存在） #

创建app/auth/callback/google/page.tsx处理OAuth回调：

// app/auth/callback/google/page.tsx
'use client';
import { useEffect } from 'react';
import { handleAuth } from 'aws-amplify/auth';

export default function CallbackPage() {
  useEffect(() => {
    // 处理Amplify OAuth回调逻辑
    handleAuth();
  }, []);

  return <div>正在处理登录，请稍候...</div>;
}

5. 清除缓存重置状态 #

• 清除浏览器缓存和本地存储，避免旧会话干扰。
• 测试前可调用Amplify的全局登出方法重置状态：

import { signOut } from 'aws-amplify/auth';
await signOut({ global: true });

内容的提问来源于stack exchange，提问作者Atharv Arolkar