Next.js Discord

Discord Forum

[SOLVED]How do i define my route for this URL string?

Answered
Cape lion posted this in #help-forum
Open in Discord
Cape lionOP
Hello everyone,

I am working on a hobby project and I have Firebase as authentication service which generates verification codes. The Firebase Auth handler generates a verification URL for the user, to be clicked and my question is that if this is the format of the URL generated:
http://localhost:3000/__/auth/action?mode=verifyEmail&oobCode=[...]
How do i structure my projects directory to accomodate the URL.

Here is the code for the page inside the action directory:
' use client'

import * as React from 'react';
import { useSearchParams } from 'next/navigation';

export default function Action() {

    const params = useSearchParams();
    const oobCode = params.get('oobCode');
    return (
        <>
            the code is: {oobCode}
        </>
    )
}


I have created the /__/auth/action directory, but when I click on the link it reutrn 404. Should it be a catch-all route or how could I make this work?
Answered by Ray
// app/auth/action/page.tsx
export default function Page({
  searchParams,
}: {
  searchParams: { mode: string; oobCode: string };
}) {
  return (
    <div>
      {searchParams.mode} - {searchParams.oobCode}
    </div>
  );
}
View full answer

29 Replies

@Ray hi, you can custom the link in firebase console Authentication > Templates > Reset password > Edit > customize action URL
Cape lionOP
Yes, that's viable but i don't know what should i write there to make it work in next
Ray
maybe you could try something like this http://localhost:3000/auth/action
Cape lionOP
So action needs to be a folder right? Then the pahe inside the action folder is going to read the url
Ray
yes create a page.tsx in app/auth/action/page.tsx
Cape lionOP
And the query parameters are going to be appended to the action folder
And the page.tsx will be able to read the query params
Ray
// app/auth/action/page.tsx
export default function Page({
  searchParams,
}: {
  searchParams: { mode: string; oobCode: string };
}) {
  return (
    <div>
      {searchParams.mode} - {searchParams.oobCode}
    </div>
  );
}
Answer
Ray
try this
you don't need to make it client component to read the searchParams
Cape lionOP
Ah ok, i dont need to use useSearchParams hook then, cool, looks easy enough
Ray
yep
omit the type if you are not using typescript
@Ray omit the type if you are not using typescript
Cape lionOP
No worries I need to learn Typescript as well
Ray
cool, let me know if it works for you
Cape lionOP
Sure, but right now i'm at work so i'll be back in 8 hours
Thank you for your help though
Ray
np
Cape lionOP
@Ray Hey Ray, give me just 2 minutes to start the nextjs server and check it out if it works or not
Cape lionOP
I can confirm it works fine
Ray
nice
Cape lionOP
it loads the searchParams.mode and searchParams.oobCode as well
Thank you so much
🙂
Ray
cool, please mark solution if your issue have be solved
Cape lionOP
SOLUTION:
// app/auth/action/page.tsx
export default function Page({
  searchParams,
}: {
  searchParams: { mode: string; oobCode: string };
}) {
  return (
    <div>
      {searchParams.mode} - {searchParams.oobCode}
    </div>
  );
}
Ray
ah you can right click the answer > application > mark solution 😆
@Ray ah you can right click the answer > application > mark solution 😆
Cape lionOP
Sorry, i wasnt aware of that, thanks again
Ray
np