[SOLVED] NFT Gated Page Redirect

Moralis General
#1

Hi all,

I’m working on trying to figure out how to amend the NFT Gated website tutorial code so as to display a link to an exclusive page rather than returning the message “you have my NFT” as per the tutorial: https://docs.moralis.io/example-dapps/evm/token-gating-website-nextjs#nft-gated-page-with-getserversideprops

I’m new to coding so am not sure where to go from here. My code is identical to the tutorial code plus an added page which the user should be redirected to after the nft.raw.total>0 check.

Thanks for the help!

#2

redirect can be done inside getServerSide props with

if (condition) {

return {
  redirect: {
    permanent: false,
    destination: "/yourpage",
  },
  props:{},
};

}
2 Likes
#3

Thank you,

I’m getting an error still:

image
image849×530 19.6 KB

Most likely I’ve just written the code wrong - being brand new to NextJS and coding in general, I don’t have the logicunderstanding yet to diagnose. Here is the code for my protected page. Would hugely appreciate if you could let me know where I’ve gone wrong.

import { getSession } from "next-auth/react";
import Moralis from "moralis";
import { EvmChain } from "@moralisweb3/common-evm-utils";
import Link from "next/link";

function Protected({ message, nftList }) {
  return (
    <div>
      <h3>Protected content</h3>
      <p>{message}</p>
      <pre>{JSON.stringify(nftList, null, 2)}</pre>
    </div>
  );
}

export async function getServerSideProps(context) {
  const session = await getSession(context);

  if (!session) {
    return {
      redirect: {
        destination: ".../pages/index.js",
        permanent: false,
      },
    };
  }

  if (!Moralis.Core.isStarted) {
    await Moralis.start({ apiKey: process.env.MORALIS_API_KEY });
  }

  const nftList = await Moralis.EvmApi.nft.getWalletNFTs({
    chain: EvmChain.ETHEREUM,
    address: session.user.address,
    // replace "0x..." with your NFT token address
    tokenAddresses: ["0x495f947276749ce646f68ac8c248420045cb7b5e"],
  });

  if (nftList.raw.total > 0) {
    return {
      redirect: {
        permanent: false,
        destination: "/videos",
      },
      props: {},
    };
  }
}
export default Protected;

Thanks

#4

You can add a console.log on the last line to see if there is any return in that function called

#5

this should be destination : "/"

#6

Thanks, still getting the error however.

#7

Added to final line, nothing returned

#8

I mean to check the console, to do some debugging to see what code executes

#9

I ran a debug through VSCode, results:

image
image984×411 40.9 KB

#10

I was thinking at a more basic debug where you add some lines with console.log and after that you check to see if those messages from those console.log lines show in the output or not as expected

#11

Sorry, you might have to give me an example. I literally started learning to code last week haha. Think i’ve done quite well to get this far tbh haha.

#12

what does this code return when that if is not true?

#13

Assuming if I put this in the right place (a big assumption) returns nothing.

if (nftList.raw.total > 0) {
    return {
      redirect: {
        permanent: false,
        destination: "/videos",
      },
      props: {},
    };
  }
  console.log;
}
export default Protected;
#14

Update: I don’t know how but I think I just solved it… It spontaneously worked for the wallet with the NFT (redirected correctly) but returned the same error for a wallet without it.

I added an else function to redirect back to index and it now seems to be functioning perfectly.

  if (nftList.raw.total > 0) {
    return {
      redirect: {
        permanent: false,
        destination: "/videos",
      },
      props: {},
    };
  } else {
    return {
      redirect: {
        permanent: false,
        destination: "/",
      },
    };
  }
}
export default Protected;

Thanks for the assistance!
1 Like
#15

Your getserverside function still needs to return something, you can have it like so

  if (nftList.raw.total > 0) {
    return {
      redirect: {
        destination: "/videos",
        permanent: false,
      },
    };
  }

  return {
    props: {},
  };
#16

also, on your /videos route you still need to do a check inside getserversideprops and redirect to a different page if the used doesnt have access


  if (nftList.raw.total < 1) {
    return {
      redirect: {
        destination: "/signin",
        permanent: false,
      },
    };
  }

  return {
    props: {},
  };
#17

I can see it’ll take me a while to get to grips with this… plus it’s solidity next so I’d better pull my socks up and get to work! Thanks for your help.

1 Like
#18

Hi,

Hope i can continue with this on this thread as is related to our past feed. I just realised that with my solution or redirecting through the NFT gate, of course you can navigate to that URL directly to bypass it. Therefore I need a way of returning the page contents within the NFT check function. I have tried setting the page as a component and importing it into the code but clearly not compatible with the getServerSideProps.

Do you have any suggestions how I can do this?

Thank you

#19

on your protected page you can add the same logic to redirect the user if they doesnt have the nft

#20

Thank you, that works great.
However the problem remains that I can simply navigate on the local host to localhost:3000/videos and I can access the page whether or not I’m connected to an NFT-carrying wallet

I think instead of a redirect, I need to inject the pages code directly into the getserversideprops (if I understand that correctly) then return the logic : if NFT exists in wallet, show content, if not send back to “/”. Unfortunately the moralis tutorial only shows how to return NFT details, not a protected page itself.