{"id":28119,"date":"2022-03-23T22:25:34","date_gmt":"2022-03-23T22:25:34","guid":{"rendered":"http:\/\/How-to-build-a-Product-Hunt-Clone-with-Next.js-Part-2-of-2"},"modified":"2022-03-23T22:25:34","modified_gmt":"2022-03-23T22:25:34","slug":"how-to-build-a-product-hunt-clone-with-next-js-part-2-of-2","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-product-hunt-clone-with-next-js-part-2-of-2\/","title":{"rendered":"How to build a Product Hunt Clone – Part 2 of 2"},"content":{"rendered":"

Introduction<\/h2>\n

This jam is the final part of a two-part series on creating a Product Hunt Clone in Next.js. In the first part<\/a>, we configured the initial Next.js app with Auth0, Cloudinary, and Airtable. Then, we fetched and displayed the products on the homepage. We also discussed how to add and delete products in our app.<\/p>\n

In this part, we will build the User Profile page where users can see their products and add the functionality to update the products. We will also discuss how to upvote a product.<\/p>\n

If you want to jump right into the code, check out the GitHub Repo here<\/a>.<\/p>\n

You can refer to the first part here: How to build a Product Hunt Clone with Next.js – Part 1 of 2<\/a><\/p>\n

CodeSandbox<\/h2>\n

Since the preview in the CodeSandbox is embedded inside another page, you will see the products but you will not be able to log in via the preview. Instead, to explore and play navigate to deployed version, https:\/\/d00re.sse.codesandbox.io\/<\/a>.<\/p>\n<\/div>\n \n

\n <\/iframe>\n <\/div>\n\n

How to create User Profile page<\/h2>\n

In this section, you will create the My Profile<\/code> page, showing the current user\u2019s information and their products. You have already created the link to the My Profile<\/code> page in the Navbar component, i.e., \/user\/profile<\/code>.<\/p>\n

You can split the My Profile<\/code> page into two parts. First, you need to show the user information, and second, you need to show the products created by that user. You can easily extract user information from the user<\/code> object of the useUser()<\/code> hook. For the second part, you will need to create a function in the lib\/api.js<\/code> file to get the products where the Sub<\/code> of product is equal to the current user\u2019s sub<\/code>.<\/p>\n

Create and export a function named getProductsByUserSub()<\/code> by adding the following code to lib\/api.js<\/code> file.<\/p>\n

export<\/span> const<\/span> getProductsByUserSub = async<\/span> (sub) => {\n  const<\/span> data = await<\/span> table\n    .select({\n      filterByFormula<\/span>: `Sub = \"${sub}<\/span>\"`<\/span>,\n    })\n    .firstPage();\n  return<\/span> data.map((record<\/span>) =><\/span> {\n    return<\/span> { id<\/span>: record.id, ...record.fields };\n  });\n};\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the above code, you pass the sub<\/code> of the user as an argument to the function and, with the help of the filterByFormula<\/code> method, filter the records where the Sub<\/code> of product is equal to the current user\u2019s sub<\/code>.<\/p>\n
The next step is to create the profile.js<\/code> file under the pages\/user<\/code> directory. Run the following command in the terminal.<\/p>\n
mkdir pages\/user\ntouch pages\/user\/profile.js\n<\/code><\/span><\/pre>\n
Add the following code to the user\/profile.js<\/code> file.<\/p>\n
\/\/ pages\/user\/profile.js<\/span>\nimport<\/span> Head from<\/span> \"next\/head\"<\/span>;\nimport<\/span> { useUser, withPageAuthRequired, getSession } from<\/span> \"@auth0\/nextjs-auth0\"<\/span>;\nimport<\/span> Product from<\/span> \"..\/..\/components\/Product\"<\/span>;\nimport<\/span> Navbar from<\/span> \"..\/..\/components\/Navbar\"<\/span>;\nimport<\/span> {getProductsByUserSub} from<\/span> \"..\/..\/lib\/api\"<\/span>\n\nexport<\/span> default<\/span> function<\/span> Profile<\/span>({products}<\/span>) <\/span>{\n  const<\/span> { user, error, isLoading } = useUser();\n\n  if<\/span> (isLoading) {\n    return<\/span> (\n      <div<\/span> className<\/span>=\"mx-auto my-64 text-gray-800 text-center text-3xl\"<\/span>><\/span>\n        Loading\n      <\/div<\/span>><\/span><\/span>\n    );\n  }\n  if<\/span> (error) return<\/span> <div<\/span>><\/span>{error.message}<\/div<\/span>><\/span><\/span>;\n\n  return<\/span> (\n    <div<\/span> className<\/span>=\"contianer px-2\"<\/span>><\/span>\n      <Head<\/span>><\/span>\n        <title<\/span>><\/span> User: {user.name}<\/title<\/span>><\/span>\n        <link<\/span> rel<\/span>=\"icon\"<\/span> href<\/span>=\"\/favicon.ico\"<\/span> \/><\/span>\n      <\/Head<\/span>><\/span>\n      <Navbar<\/span> \/><\/span>\n      <div<\/span> className<\/span>=\"flex space-x-4 px-4 my-10 justify-around\"<\/span>><\/span>\n        <div<\/span> className<\/span>=\"h-36 w-96 rounded-3xl  shadow-lg relative flex flex-col \n\t    items-center justify-between md:items-start p-5 transition-all duration-150\"<\/span>><\/span>\n          <img<\/span>\n            className<\/span>=\"rounded-full w-20 h-20 shadow-sm absolute -top-8\n\t    transform md:scale-110 duration-700\"<\/span>\n            src<\/span>={user.picture}<\/span>\n            alt<\/span>={user.name}<\/span>\n          \/><\/span>\n\n          <div<\/span> className<\/span>=\" align-middle text-2xl font-semibold text-gray-800 \n\t     text-center m-auto md:m-0 md:mt-8\"<\/span>><\/span>\n            {user.name}\n          <\/div<\/span>><\/span>\n          <ul<\/span> className<\/span>=\"text-lg text-gray-600 font-light md:block\"<\/span>><\/span>\n            <li<\/span>><\/span>Products: {products ? products.length : 0}<\/li<\/span>><\/span>\n          <\/ul<\/span>><\/span>\n        <\/div<\/span>><\/span>\n      <\/div<\/span>><\/span>\n\n      {products.length>0 ? (\n        products.map((product) => (\n          <Product<\/span>\n            key<\/span>={product.id}<\/span>\n            id<\/span>={product.id}<\/span>\n            name<\/span>={product.Name}<\/span>\n            link<\/span>={product.Link}<\/span>\n            description<\/span>={product.Description}<\/span>\n            publicId<\/span>={product.PublicId}<\/span>\n            check<\/span>={true}<\/span>\n          \/><\/span>\n        ))\n      ) : (\n        <div<\/span> className<\/span>=\"mx-auto my-12 text-gray-800 text-center text-3xl\"<\/span>><\/span>\n          You are yet to create your first Product.\n        <\/div<\/span>><\/span>\n      )}\n    <\/div<\/span>><\/span><\/span>\n  );\n}\n\nexport<\/span> const<\/span> getServerSideProps = withPageAuthRequired({\n  returnTo<\/span>: \"\/api\/auth\/login\"<\/span>,\n  async<\/span> getServerSideProps(ctx) {\n    const<\/span> sub = await<\/span> getSession(ctx.req).user.sub;\n    const<\/span> data = await<\/span> getProductsByUserSub(sub);\n    return<\/span> {\n      props<\/span>: {\n        products<\/span>: data,\n      },\n    };\n  },\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the above code, you are using Next.js getServerSideProps<\/code> function to fetch the products created by the current user with the help of the getProductsByUserSub()<\/code> function.<\/p>\n
The getProductsByUserSub()<\/code> function requires the user\u2019s sub<\/code> to fetch the products, accessed using the getSession()<\/code> method. The getSession()<\/code> method gets the user\u2019s session from the request. You can read more about this method here<\/a>.<\/p>\n
The records from Airtable are passed as props to the Profile<\/code> component. In this component, you use the user<\/code> object to show the current user\u2019s name and profile picture.<\/p>\n
You also show the total number of products created by the user by calculating the length of the products<\/code> array. You then map over the products<\/code> array, and similar to the index.js<\/code> file, show the products on the page using the Product<\/code> component.<\/p>\n
Since the products fetched from Airtable are created by the current user, you pass true<\/code> in the check<\/code> prop of the Product<\/code> component.<\/p>\n
There is also a default message if the current user has not created any products.<\/p>\n
Here is how the My Profile<\/code> page will look if the user has not created any product.<\/p>\n
\"My<\/p>\n
Here is the My Profile<\/code> page after the user has created a product.<\/p>\n
\"My<\/p>\n
How to update a Product<\/h2>\n
In this section, you will create the update\/[id]<\/code> dynamic route to edit\/update a product.  In this jam, you will update only the textual data of the product and not its image.<\/p>\n
To update the product, you will create a form with Name<\/code>, Link<\/code>, and Description<\/code> fields. Then, you will fetch the selected product and prefill the form with its data so that the user can see and update the product accordingly.<\/p>\n
You might remember that in the Product<\/code> component, you were sending the id<\/code> of the product in the query parameter.<\/p>\n
<button<\/span>\n  className<\/span>=\"mx-1 h-6 w-6\"<\/span>\n  onClick<\/span>={()<\/span> =><\/span>\n    router.push({\n      pathname: \"\/update\/[id]\",\n      query: {\n        id: id,\n      },\n    })\n  }\n>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
You will use this id<\/code> in the query to fetch the corresponding product from Airtable.<\/p>\n
Create and export functions named getProductById()<\/code>  and updateProduct()<\/code>  in lib\/api.js<\/code> file.<\/p>\n
export<\/span> const<\/span> getProductById = async<\/span> (id) => {\n  const<\/span> data = await<\/span> table.find(id);\n  return<\/span> { id<\/span>: data.id, ...data.fields };\n};\n\nexport<\/span> const<\/span> updateProduct = async<\/span> ({ id, name, link, description }) => {\n  const<\/span> data = await<\/span> table.update(\n    id,\n    {\n      Name<\/span>: name,\n      Description<\/span>: description,\n      Link<\/span>: link,\n    },\n\n    function<\/span> (err, records<\/span>) <\/span>{\n      if<\/span> (err) {\n        console<\/span>.error(err);\n      }\n    }\n  );\n};\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the getProductById<\/code>  function, you use Airtable\u2019s find()<\/code> method to retrieve the product based on its id.<\/p>\n
In the updateProduct<\/code> function, you use Airtable\u2019s update<\/code> method to update the product. You pass the product\u2019s id<\/code> to be updated as the first argument,  followed by an object containing the fields to be updated, i.e., Name<\/code>, Description<\/code>, and Link<\/code>. The remaining fields like Sub<\/code> and PublicId<\/code> remain unchanged.<\/p>\n
Run the following command to create the [id].js<\/code> under the pages\/update<\/code> directory.<\/p>\n
mkdir pages\/update\ntouch pages\/update\/[id].js\n<\/code><\/span><\/pre>\n
Add the following code to [id].js<\/code> file.<\/p>\n
import<\/span> React, { useState } from<\/span> \"react\"<\/span>;\nimport<\/span> Head from<\/span> \"next\/head\"<\/span>;\nimport<\/span> { useUser, withPageAuthRequired } from<\/span> \"@auth0\/nextjs-auth0\"<\/span>;\nimport<\/span> { getProductById } from<\/span> \"..\/..\/lib\/api\"<\/span>;\nimport<\/span> { useRouter } from<\/span> \"next\/router\"<\/span>;\nimport<\/span> Navbar from<\/span> \"..\/..\/components\/Navbar\"<\/span>;\n\nconst<\/span> UpdateProduct = ({ product }<\/span>) =><\/span> {\n  const<\/span> router = useRouter();\n\n  const<\/span> [name, setName] = useState(product.Name);\n  const<\/span> [link, setLink] = useState(product.Link);\n  const<\/span> [description, setDescription] = useState(product.Description);\n  const<\/span> { user, error, isLoading } = useUser();\n\n  if<\/span> (isLoading) return<\/span> <div<\/span>><\/span>Loading<\/div<\/span>><\/span><\/span>;\n  if<\/span> (error) return<\/span> <div<\/span>><\/span>{error.message}<\/div<\/span>><\/span><\/span>;\n\n  const<\/span> handleSubmit = async<\/span> (e) => {\n    await<\/span> e.preventDefault();\n    const<\/span> data = await<\/span> fetch(\"\/api\/updateProduct\"<\/span>, {\n      method<\/span>: \"POST\"<\/span>,\n      body<\/span>: JSON<\/span>.stringify({ id<\/span>: router.query.id, name, description, link }),\n      headers<\/span>: {\n        \"Content-Type\"<\/span>: \"application\/json\"<\/span>,\n      }\n    });\n    await<\/span> router.replace(\"\/\"<\/span>);\n  };\n\n  if<\/span> (user) {\n    return<\/span> (\n      <div<\/span>><\/span>\n        <Head<\/span>><\/span>\n          <title<\/span>><\/span> Update Product : {product.Name} <\/title<\/span>><\/span>\n          <link<\/span> rel<\/span>=\"icon\"<\/span> href<\/span>=\"\/favicon.ico\"<\/span> \/><\/span>\n        <\/Head<\/span>><\/span>\n        <Navbar<\/span> \/><\/span>\n        <div<\/span> className<\/span>=\"md:grid  justify-items-center md:gap-6\"<\/span>><\/span>\n          <div<\/span> className<\/span>=\"mt-0  md:mt-0 md:col-span-2\"<\/span>><\/span>\n            <h3<\/span> className<\/span>=\"text-4xl text-center font-normal leading-normal mt-0 text-indigo-800\"<\/span>><\/span>\n              Update Product: {product.Name}\n            <\/h3<\/span>><\/span>\n            <form<\/span>><\/span>\n              <div<\/span> className<\/span>=\"shadow-md sm:rounded-md sm:overflow-hidden\"<\/span>><\/span>\n                <div<\/span> className<\/span>=\"px-4 py-5 bg-white space-y-6 sm:p-6\"<\/span>><\/span>\n                  <div<\/span> className<\/span>=\"grid grid-cols-3 gap-6\"<\/span>><\/span>\n                    <div<\/span> className<\/span>=\"col-span-3 sm:col-span-2\"<\/span>><\/span>\n                      <label<\/span>\n                        htmlFor<\/span>=\"product_name\"<\/span>\n                        className<\/span>=\"block text-sm font-medium text-gray-700\"<\/span>\n                      ><\/span>\n                        Name of the Product\n                      <\/label<\/span>><\/span>\n                      <div<\/span> className<\/span>=\"mt-1 flex rounded-md shadow-sm\"<\/span>><\/span>\n                        <input<\/span>\n                          type<\/span>=\"text\"<\/span>\n                          name<\/span>=\"product_name\"<\/span>\n                          id<\/span>=\"product_name\"<\/span>\n                          value<\/span>={name}<\/span>\n                          onChange<\/span>={(e)<\/span> =><\/span> setName(e.target.value)}\n                          autoComplete=\"given-name\"\n                          className=\"mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md\"\n                        \/>\n                      <\/div<\/span>><\/span>\n                    <\/div<\/span>><\/span>\n                  <\/div<\/span>><\/span>\n\n                  <div<\/span>><\/span>\n                    <label<\/span>\n                      htmlFor<\/span>=\"product_description\"<\/span>\n                      className<\/span>=\"block text-sm font-medium text-gray-700\"<\/span>\n                    ><\/span>\n                      Description\n                    <\/label<\/span>><\/span>\n                    <div<\/span> className<\/span>=\"mt-1\"<\/span>><\/span>\n                      <textarea<\/span>\n                        id<\/span>=\"product_description\"<\/span>\n                        name<\/span>=\"product_description\"<\/span>\n                        rows<\/span>={3}<\/span>\n                        value<\/span>={description}<\/span>\n                        onChange<\/span>={(e)<\/span> =><\/span> setDescription(e.target.value)}\n                        className=\"shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md\"\n                        placeholder=\"Brief description for your Product.\"\n                      \/>\n                    <\/div<\/span>><\/span>\n                  <\/div<\/span>><\/span>\n                  <div<\/span> className<\/span>=\"grid grid-cols-3 gap-6\"<\/span>><\/span>\n                    <div<\/span> className<\/span>=\"col-span-3 sm:col-span-2\"<\/span>><\/span>\n                      <label<\/span>\n                        htmlFor<\/span>=\"product_link\"<\/span>\n                        className<\/span>=\"block text-sm font-medium text-gray-700\"<\/span>\n                      ><\/span>\n                        Link\n                      <\/label<\/span>><\/span>\n                      <div<\/span> className<\/span>=\"mt-1 flex rounded-md shadow-sm\"<\/span>><\/span>\n                        <input<\/span>\n                          type<\/span>=\"text\"<\/span>\n                          name<\/span>=\"product_link\"<\/span>\n                          id<\/span>=\"product_link\"<\/span>\n                          value<\/span>={link}<\/span>\n                          onChange<\/span>={(e)<\/span> =><\/span> setLink(e.target.value)}\n                          className=\"focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-md sm:text-sm border-gray-300\"\n                          placeholder=\"www.example.com\"\n                        \/>\n                      <\/div<\/span>><\/span>\n                    <\/div<\/span>><\/span>\n                  <\/div<\/span>><\/span>\n                <\/div<\/span>><\/span>\n                <div<\/span> className<\/span>=\"px-4 py-2 bg-gray-50 text-right sm:px-6\"<\/span>><\/span>\n                  <button<\/span>\n                    type<\/span>=\"submit\"<\/span>\n                    onClick<\/span>={handleSubmit}<\/span>\n                    className<\/span>=\"inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500\"<\/span>\n                  ><\/span>\n                    Update\n                  <\/button<\/span>><\/span>\n                <\/div<\/span>><\/span>\n              <\/div<\/span>><\/span>\n            <\/form<\/span>><\/span>\n          <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span>\n      <\/div<\/span>><\/span><\/span>\n    );\n  }\n};\n\nexport<\/span> default<\/span> UpdateProduct;\n\nexport<\/span> const<\/span> getServerSideProps = withPageAuthRequired({\n  returnTo<\/span>: \"\/api\/auth\/login\"<\/span>,\n  async<\/span> getServerSideProps(ctx) {\n    const<\/span> data = await<\/span> getProductById(ctx.params.id);\n\n    return<\/span> {\n      props<\/span>: {\n        product<\/span>: data,\n      },\n    };\n  },\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
You use the same code for the form as in the product\/insert.js<\/code> file.<\/em><\/p>\n
Similar to \/user\/profile.js<\/code> file, you use the getServerSideProps()<\/code> function wrapped with the withPageAuthRequired<\/code> method to redirect any anonymous user to the login page.<\/p>\n
You access the product\u2019s id<\/code> using the params<\/code> object and pass it to the getProductById()<\/code> function. Finally, the product fetched is sent to the  UpdateProduct<\/code> function as a prop.<\/p>\n
You define three states for name, description, and link of the product and set their default value to their corresponding value in the product<\/code> object.<\/p>\n
Then, in the UpdateProduct<\/code> function\u2019s return<\/code> statement, you create a two-way data bind between the user input and the states.<\/p>\n
\"Update<\/p>\n
Once the user has updated the product and clicks the Update<\/code> button, the handleSubmit()<\/code> function is triggered, sending a POST request to \/api\/updateProduct<\/code> API route with the id<\/code>, name<\/code>, description<\/code>, and link<\/code> of the product in the request body.<\/p>\n
Run the following commands to create the \/api\/updateProduct<\/code> API route.<\/p>\n
touch pages\/api\/updateProduct.js\n<\/code><\/span><\/pre>\n
Add the following code to updateProduct.js<\/code> file.<\/p>\n
import<\/span> { withApiAuthRequired } from<\/span> \"@auth0\/nextjs-auth0\"<\/span>;\nimport<\/span> {updateProduct} from<\/span> \"..\/..\/lib\/api\"<\/span>\n\nexport<\/span> default<\/span> withApiAuthRequired(async<\/span> function<\/span> handler<\/span>(req, res<\/span>) <\/span>{\n  if<\/span> (req.method !== \"POST\"<\/span>) {\n    return<\/span> res.status(405<\/span>);\n  }\n  const<\/span> { name, description, link, id } = req.body;\n\n  await<\/span> updateProduct({ id, name, description, link });\n  return<\/span> res.status(200<\/span>).json({ msg<\/span>: \"Product Updated\"<\/span> });\n  \n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
You protect this API route with the withApiAuthRequired()<\/code> method from @auth0\/nextjs-auth0<\/code> SDK. Then, you import the updateProduct<\/code> function from the lib\/api.js<\/code> file and pass the arguments sent in the request body to it. Finally, after the product has been updated successfully, Product Updated<\/code> is sent as a response.<\/p>\n
Here is a GIF showing the Update Product<\/strong> feature in action.<\/p>\n
\"GIF<\/p>\n
How to upvote a Product<\/h2>\n
In this section, you will create the upvote feature in Products. Like the actual Product Hunt, a user should be able to upvote a product only once and should be able to remove their upvote from the product. For tutorial purposes, we will call the process of removing the upvote –  downvote.<\/p>\n
Note: You are not actually downvoting a product; you are removing your upvote from it.<\/em><\/p>\n
For every upvote, you need to keep track of the id<\/code> of the product and the unique identifier of a user, i.e., the user\u2019s sub<\/code>.  You can store the id<\/code> and sub<\/code> together to represent an upvote.<\/p>\n
By checking if the user\u2019s sub<\/code> is already associated with a product, i.e., a pair of the current user\u2019s sub<\/code> and the product id<\/code>, you can make sure each user votes for a product only once. Then, when the user removes their upvote, you can delete this product id<\/code> and sub<\/code> pair.<\/p>\n
If you were using a NoSQL database like MongoDB, you could have created a new field in the schema and store the  sub<\/code> of the current user in an array when the upvote button is clicked. This array would contain the sub<\/code> of all the users who upvoted a particular product. And to downvote a product, you could remove that user\u2019s sub<\/code> from the array.<\/p>\n
The resultant product<\/code> object would look similar to this.<\/p>\n
{\n  \"id\"<\/span>: \"rec176WGNlRJGN0mg\"<\/span>,\n  \"Name\"<\/span>: \"Dev Desks\"<\/span>,\n  \"Description\"<\/span>: \"The place where Devs share Desks! \"<\/span>,\n  \"PublicId\"<\/span>: \"product-hunt-clone\/wji2dipmt3cssvvwbr06\"<\/span>,\n  \"Link\"<\/span>: \"https:\/\/devdesks.io\/\"<\/span>,\n  \"Sub\"<\/span>: \"google-oauth2|10535765999545372338041\"<\/span>,\n  \"Votes\"<\/span>: [\n    \"google-oauth2|10535765999545372338041\"<\/span>,\n    \"google-oauth2|1053576593456372338041\"<\/span>,\n    \"google-oauth2|105357659995452323041\"<\/span>\n  ]\n}\n<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n
But, you cannot create an array object in Airtable, so its not possible to store the votes in the same manner as in a NoSQL database.<\/p>\n
Here are a few workarounds for this limitation:<\/p>\n
You will notice that you have wrapped the getServerSideProps()<\/code> function with  withPageAuthRequired()<\/code> method from the @auth0\/nextjs-auth0<\/code> SDK. This withPageAuthRequired<\/code> protects the My Profile<\/code> page from anonymous logins and redirects them to the login page. You can read more about this method here<\/a>.<\/p>\n