Next.js Discord

Discord Forum

Passing parameters with routing

Answered
Selkirk Rex posted this in #help-forum
Open in Discord
Selkirk RexOP
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

export default function setup2FA(imgSrc) {
  return (
      <div className="flex items-center justify-center min-h-screen bg-[#7e57c2]">
        <Card className="w-full max-w-md p-2 bg-white">
          <CardHeader className="text-center">
            <CardTitle className="text-xl font-bold">Set Up Two Factor Authentication</CardTitle>
            <CardDescription>Scan QR code with your phone</CardDescription>
          </CardHeader>
          <CardContent className="flex flex-col items-center space-y-4">
            <img src={imgSrc} alt="QR Code" className="w-48 h-48" />
            <div className="w-full space-y-4">
              <Input id="qr-code" placeholder="Enter code" />
              <Button className="bg-black text-white w-full">Verify</Button>
            </div>
          </CardContent>
          <CardFooter className="py-0" />
        </Card>
      </div>
  )
}

Guys how to pass variables to components with next js?
I am routing from page to page using nextjs router 
router.push('/account');
      }

but this account component need to receive one argument that is rendered through sending request its qrcode so everytime value is diff and dont know how to write it ti send this argument with routing kind of
Answered by B33fb0n3
you can add a query param to it. For example like a token or anything like that, to identify the request. The same page will be rendered and you get the correct identifier
View full answer

16 Replies

Answer
@B33fb0n3 you can add a query param to it. For example like a token or anything like that, to identify the request. The same page will be rendered and you get the correct identifier
Selkirk RexOP
Yeah but then instead of being redirected to /enable2FA ill be redirected to like /enable2FA?someparam=value
right?
isnt there soulution where i can keep the path to my component /enable2FA as it is and pass some parameters?
@Selkirk Rex isnt there soulution where i can keep the path to my component /enable2FA as it is and pass some parameters?
B33fb0n3
of course you can also work with cookies or maybe even headers, but everything is that direction is more complicated for the same result. You know how many others do that, when you for example need to verify your email: you will also get the url with a query param. So that's a valid option.

For 2FA I saw a lot of companies, that have the following flow:
Enter page -> page show QR code -> you scan QR code -> you click "next" -> you will be asked to enter the code from the app that generates the code -> code will be entered -> code will be checked by the server -> if valid = 2FA activated.

Maybe you want to do it like that too?
Selkirk RexOP
I have whole logic written in spring and endpoints etc
Once user clicks enable2fa qr string uri is generated through endpoints response
but i need to pass this string uri to /setup2fa website
because in other way it wont be like rendered
so just wondering how to do it
@Selkirk Rex So you're saying approach with adding parameters to router path to be pushed to like /account?param=value is the easiest one?
B33fb0n3
From that what I have seen until yet, it is. If you want it even easier make it clientside (of course some parts need to be serverside). I think about an mutli step form or something in that direction
im not a pro frontend touching it first time
@Selkirk Rex https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes how abotu that?
B33fb0n3
what do you want to do with dynamic routes? Of course you can change your query param also to a dynamic fragment and build your own page for it. It's than the same as this: https://nextjs-forum.com/post/1256207072719015976#message-1256207671363899412 but
The same page will be rendered and you get the correct identifier
is changed to
A new page will be rendered and dyou get the correct identifier
Selkirk RexOP
Yeah im giving up will do it with query param if its the easiest
Selkirk RexOP
I did it in that way thanks a lot @B33fb0n3 do u know how to store jwt token because dont know how to handle it
@Selkirk Rex I did it in that way thanks a lot <@301376057326567425> do u know how to store jwt token because dont know how to handle it
B33fb0n3
that sounds great! The jwt is a very different and unclarified topic for me right now. So please mark solution & open another thread that clarifies the jwt issue