How redirect in route component ?

Answered

Pacific herring posted this in #help-forum

Pacific herringOP

2024-04-09T16:42:32.185Z

I have a small question, do route.tsx can retrieve the public domain ? Because I have a route which is supposed to redirect the user, but is returning to http://localhost:3000 everytime (in dev and in prod). There is my route :

import { createRouteHandlerClient } from '@/lib/supabase/route';
import { NextRequest, NextResponse } from 'next/server';

export const dynamic = 'force-dynamic';

export async function GET(request: NextRequest) {
  const requestUrl = new URL(request.url);
  try {
    const code = requestUrl.searchParams.get('code');
    const next = requestUrl.searchParams.get('next') ?? '/';
    
    if (!code) throw new Error('No code provided');
    const supabase = createRouteHandlerClient();
    const { error } = await supabase.auth.exchangeCodeForSession(code);
    if (error) throw error;
    
    // URL to redirect to after sign in process completes
    return NextResponse.redirect(new URL(next, requestUrl));
  
  } catch (error) {
    console.error(`error [${new Date().toISOString()}]:`, error);
    // return the user to the error page
    return NextResponse.redirect(new URL('/auth/error', requestUrl));
  }
}

Answered by Ray

import { NextResponse } from "next/server";

export function GET(req: Request) {
  const proto = new URL(req.url).protocol;
  const host = req.headers.get("host") ?? "";
  const path = "/";
  return NextResponse.redirect(`${proto}//${host}${path}`);
}

View full answer

37 Replies

Pacific herringOP

2024-04-09T18:05:04.245Z

any idea ?

joulev

2024-04-09T18:30:19.093Z

@linesofcode this is the issue mentioned in #discussions, could you continue the discussion here?

@joulev <@414145877335080960> this is the issue mentioned in <#752647196419031042>, could you continue the discussion here?

Pacific herringOP

2024-04-09T18:33:01.540Z

yeah sry Ive delete the msg in the channel #discussions

Pacific herringOP

2024-04-09T20:45:13.684Z

maybe the problem come from AWS ?

arrh Idk what can I try now

@Pacific herring I have a small question, do `route.tsx` can retrieve the public domain ? Because I have a route which is supposed to redirect the user, but is returning to `http://localhost:3000` everytime (in dev and in prod). There is my route : import { createRouteHandlerClient } from '@/lib/supabase/route'; import { NextRequest, NextResponse } from 'next/server'; export const dynamic = 'force-dynamic'; export async function GET(request: NextRequest) { const requestUrl = new URL(request.url); try { const code = requestUrl.searchParams.get('code'); const next = requestUrl.searchParams.get('next') ?? '/'; if (!code) throw new Error('No code provided'); const supabase = createRouteHandlerClient(); const { error } = await supabase.auth.exchangeCodeForSession(code); if (error) throw error; // URL to redirect to after sign in process completes return NextResponse.redirect(new URL(next, requestUrl)); } catch (error) { console.error(`error [${new Date().toISOString()}]:`, error); // return the user to the error page return NextResponse.redirect(new URL('/auth/error', requestUrl)); } }

Ray

2024-04-10T04:25:16.962Z

what does new URL(request.url).host give you?

@Ray what does `new URL(request.url).host` give you?

Pacific herringOP

2024-04-10T08:18:04.757Z

Like that ?

export async function GET(request: NextRequest) {
  const requestUrl = new URL(request.url);
  try {
    const code = requestUrl.searchParams.get('code');
    const next = requestUrl.searchParams.get('next') ?? '/';
    
    if (!code) throw new Error('No code provided');
    const supabase = createRouteHandlerClient();
    const { error } = await supabase.auth.exchangeCodeForSession(code);
    if (error) throw error;
    
    // URL to redirect to after sign in process completes
    return NextResponse.redirect(new URL(next, requestUrl.host));
  
  } catch (error) {
    console.error(`error [${new Date().toISOString()}]:`, error);
    // return the user to the error page
    return NextResponse.redirect(new URL('/auth/error', requestUrl.host));
  }
}

@Ray what does `new URL(request.url).host` give you?

Pacific herringOP

2024-04-10T08:26:05.014Z

Doing this I have an error code: 'ERR_INVALID_URL',

@Pacific herring Doing this I have an error `code: 'ERR_INVALID_URL',`

Ray

2024-04-10T09:21:51.442Z

yeah it is expected, was going to ask you try to console.log and see how it look like

@Ray yeah it is expected, was going to ask you try to console.log and see how it look like

Pacific herringOP

2024-04-10T09:22:45.266Z

Its so hard to fix it because I have to push my code to test in AWS each time, its a hell

@Pacific herring Its so hard to fix it because I have to push my code to test in AWS each time, its a hell <:lolsob:753870958489632819>

Ray

2024-04-10T09:24:37.709Z

what tool do you use to deploy it to aws?

sst?

@Ray what tool do you use to deploy it to aws?

Pacific herringOP

2024-04-10T09:25:40.762Z

Im new in AWS (just leave Vercel because I have problem with redirect idk why) but Ive just link hte github repo and when I push is automatically update like Vercel

@Pacific herring Im new in AWS (just leave Vercel because I have problem with redirect idk why) but Ive just link hte github repo and when I push is automatically update like Vercel

Ray

2024-04-10T09:26:08.585Z

oh ok, it should be amplify

@Ray oh ok, it should be amplify

Pacific herringOP

2024-04-10T09:26:22.572Z

oh yes its amplify

waiiit

ive just seen something

@Ray oh ok, it should be amplify

Pacific herringOP

2024-04-10T09:30:16.431Z

When accessing to domain.com/auth/callback in the Vercel hosted version, its working (redirect to domain.com/auth/error) but in AWS version is redirecting to localhost:3000/auth/callback

@Pacific herring When accessing to `domain.com/auth/callback` in the Vercel hosted version, its working (redirect to `domain.com/auth/error`) but in AWS version is redirecting to `localhost:3000/auth/callback`

Ray

2024-04-10T09:41:42.466Z

have you tried NextResponse.redirect(new URL('/auth/error', request.url)?

Im trying to deploy a project to it

are you using cloudfront?

@Ray are you using cloudfront?

Pacific herringOP

2024-04-10T09:46:16.954Z

Heuuu, I guess no ahah

@Ray have you tried `NextResponse.redirect(new URL('/auth/error', request.url)`?

Pacific herringOP

2024-04-10T09:46:56.142Z

Its what I have in my code yes :

export async function GET(request: NextRequest) {
  const requestUrl = new URL(request.url);
  try {
    const code = requestUrl.searchParams.get('code');
    const next = requestUrl.searchParams.get('next') ?? '/';
    
    if (!code) throw new Error('No code provided');
    const supabase = createServerClient();
    const { error } = await supabase.auth.exchangeCodeForSession(code);
    if (error) throw error;
    
    // URL to redirect to after sign in process completes
    return NextResponse.redirect(new URL(next, requestUrl));
  } catch (error) {
    // return the user to the error page
    const errorUrl = new URL('/auth/error', requestUrl);
    errorUrl.searchParams.set('error', `${error}`);
    return NextResponse.redirect(errorUrl);
  }
}

But actually I dont like AWS, I would love to leave it. But Vercel have weird issue with it too

@Pacific herring Its what I have in my code yes : tsx export async function GET(request: NextRequest) { const requestUrl = new URL(request.url); try { const code = requestUrl.searchParams.get('code'); const next = requestUrl.searchParams.get('next') ?? '/'; if (!code) throw new Error('No code provided'); const supabase = createServerClient(); const { error } = await supabase.auth.exchangeCodeForSession(code); if (error) throw error; // URL to redirect to after sign in process completes return NextResponse.redirect(new URL(next, requestUrl)); } catch (error) { // return the user to the error page const errorUrl = new URL('/auth/error', requestUrl); errorUrl.searchParams.set('error', `${error}`); return NextResponse.redirect(errorUrl); } }

Ray

2024-04-10T09:47:39.701Z

no, just

NextResponse.redirect(new URL('/auth/error', request.url)

@Ray no, just ts NextResponse.redirect(new URL('/auth/error', request.url)

Pacific herringOP

2024-04-10T09:48:52.753Z

Liek this ?

export async function GET(request: NextRequest) {
  const requestUrl = new URL(request.url);
  try {
    const code = requestUrl.searchParams.get('code');
    const next = requestUrl.searchParams.get('next') ?? '/';
    
    if (!code) throw new Error('No code provided');
    const supabase = createServerClient();
    const { error } = await supabase.auth.exchangeCodeForSession(code);
    if (error) throw error;
    
    // URL to redirect to after sign in process completes
    return NextResponse.redirect(new URL(next, request.url));
  } catch (error) {
    // return the user to the error page
    const errorUrl = new URL('/auth/error', request.url);
    errorUrl.searchParams.set('error', `${error}`);
    return NextResponse.redirect(errorUrl);
  }
}

@Pacific herring Liek this ? tsx export async function GET(request: NextRequest) { const requestUrl = new URL(request.url); try { const code = requestUrl.searchParams.get('code'); const next = requestUrl.searchParams.get('next') ?? '/'; if (!code) throw new Error('No code provided'); const supabase = createServerClient(); const { error } = await supabase.auth.exchangeCodeForSession(code); if (error) throw error; // URL to redirect to after sign in process completes return NextResponse.redirect(new URL(next, request.url)); } catch (error) { // return the user to the error page const errorUrl = new URL('/auth/error', request.url); errorUrl.searchParams.set('error', `${error}`); return NextResponse.redirect(errorUrl); } }

Ray

2024-04-10T09:48:58.841Z

yes

Pacific herringOP

2024-04-10T09:49:29.541Z

Im gonna try !

@Ray yes

Pacific herringOP

2024-04-10T09:58:31.783Z

still redirect to localhost...

@Ray yes

Pacific herringOP

2024-04-10T09:59:04.293Z

But only with the AWS version, not with the Vercel version... that so weird ahah

@Pacific herring But only with the AWS version, not with the Vercel version... that so weird ahah

Ray

2024-04-10T10:28:07.659Z

oh yeah, it redirect to localhost:3000 too lol

Ray

2024-04-10T10:35:18.653Z

use this

const host = req.headers.get('host')

Ray

2024-04-10T10:51:28.010Z

import { NextResponse } from "next/server";

export function GET(req: Request) {
  const proto = new URL(req.url).protocol;
  const host = req.headers.get("host") ?? "";
  const path = "/";
  return NextResponse.redirect(`${proto}//${host}${path}`);
}

Answer

@Ray ts import { NextResponse } from "next/server"; export function GET(req: Request) { const proto = new URL(req.url).protocol; const host = req.headers.get("host") ?? ""; const path = "/"; return NextResponse.redirect(`${proto}//${host}${path}`); }

Pacific herringOP

2024-04-10T12:04:37.421Z

Thx Im gonna try this !

But its gonna work for everything hoster right ? Not only AWS ?

@Pacific herring But its gonna work for everything hoster right ? Not only AWS ?

Ray

2024-04-10T12:23:09.170Z

it depends your provider but should work on most of it

@Ray it depends your provider but should work on most of it

Pacific herringOP

2024-04-10T15:50:28.876Z

Its working !