在Next.js中使用SupplyAuth配置环境特定的重定向URL

oyjwcjzk 于 11个月前发布在其他

关注(0)|答案(3)|浏览(109)

我正在开发一个Next.js应用程序，它使用Supplies身份验证。在Supplies设置中，生产环境的“Site URL”设置为https://some-production-url.com。但是，对于本地开发，我需要重定向URL指向localhost：3000。目前，即使在本地开发期间，应用程序也会重定向到生产URL。如何为生产环境和本地环境配置不同的重定向URL？

当前配置：

支持的“站点URL”设置为https://some-production-url.com。
在我的Next.js项目中设置身份验证：

async function signInWithSocialProvider(provider: any) {
    "use server"

    const origin = headers().get("origin")
    const cookieStore = cookies()
    const supabase = createClient(cookieStore)

    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: provider,
      options: {
        redirectTo: `${origin}/auth/callback`,
      },
    })

    if (error) {
      console.error(error)
      return redirect("/login?message=Could not authenticate user")
    }

    redirect(data.url)
  }

字符串
授权回调：

import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"
import { cookies } from "next/headers"

export async function GET(request: Request) {
  const requestUrl = new URL(request.url)
  const code = requestUrl.searchParams.get("code")

  if (code) {
    const cookieStore = cookies()
    const supabase = createClient(cookieStore)
    await supabase.auth.exchangeCodeForSession(code)
  }

  return NextResponse.redirect(requestUrl.origin)
}

型

**Expected Behavior：**本地运行时，我期望Supplier认证成功后重定向到localhost：3000，生产环境下重定向到https://some-production-url.com。
**实际行为：**认证后应用重定向到生产URL（https://production_url.com.），无论环境是本地还是生产。
**尝试的解决方案：**我在Supplement中的Redirect URLs部分添加了localhost:3000，与Site URL并列。但是，身份验证函数中的data.url始终指向Site URL。如果不使用data.url，我无法进行身份验证。
问题：

如何使用Supplyauth设置我的Next.js应用程序，以处理生产和本地开发环境的不同重定向URL？
有没有一种方法可以根据应用运行的环境动态设置重定向URL，比如使用环境变量或其他方法？

如能就如何解决这一问题提供任何见解或指导，将不胜感激。

next.js

来源：https://stackoverflow.com/questions/77757052/configuring-environment-specific-redirect-urls-in-next-js-with-supabase-auth

3条答案

按热度按时间

eaf3rand1#

要解决这个问题，请在Supplement中的URL配置下，将http://localhost:3000/**添加到您的重定向URL中。这是Supase docs推荐的方法。

赞(0）回复(0）举报 11个月前

8fsztsew2#

我建议使用一个环境变量与NODE_ENV组合来检查您当前是否处于支持状态。下面是基于您的示例更新的代码片段：

// TODO: you probably should use a type here
function getRedirectUrl(data: any): string {
  switch (process.env.NODE_ENV!) {
    case "production":
      return data.url;
    default:
      // change the existing redirect url to localhost
      // for development purposes
      const url = new URL(data.url);
      url.searchParams.set("redirect_to", process.env.SUPABASE_URL!);
      return url.toString();
  }
}

// TODO: you probably should use a type here
async function signInWithSocialProvider(provider: any) {
  "use server";

  const cookieStore = cookies();
  const origin = headers().get("origin");
  const supabase = createClient(cookieStore);

  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: provider,
    options: { redirectTo: `${origin}/auth/callback` },
  });

  if (error) {
    console.error(error);
    return redirect("/login?message=Could not authenticate user");
  }

  redirect(getRedirectUrl(data));
}

字符串
现在，您可以在项目根目录中创建.env.development.local和.env.test.local文件，为开发和测试定义不同的值：

SUPABASE_URL="http://localhost:3000/auth/callback"

型

赞(0）回复(0）举报 11个月前

of1yzvn43#

解决方案

我将http://localhost:3000添加到站点URL中，而不是使用我的生产URL，然后我将我的生产URL添加到重定向URL中。
我仍然有点困惑，为什么我必须进行交换，而且没有文档提到它。

赞(0）回复(0）举报 11个月前

我来回答

在Next.js中使用SupplyAuth配置环境特定的重定向URL

3条答案

相关问题

热门标签

最新问答