How could I rewrite an NFC sticker link using ReactJS to a specific profile

Question

I'm trying to figure out how I could have a set of NFC stickers that all link to the login page of a React web app, the user could then sign up to create a profile and this would link the NFC sticker to their specific profile

Every time the sticker is then tapped it would link to their specific profile (webapp.com/profilename) rather than the original landing page.

I am working on my final year project and need some advice, seen it be done before but cannot work out how they're doing it

Answer 1

You would write an NDEF message that contains the URI you want to open in a browser.

ReactJS example on how to write an NDEF URI message at https://github.com/whitedogg13/react-native-nfc-manager/blob/master/example/AppV2Ndef.js

Just change the let bytes = buildUrlPayload('https://www.revteltech.com');

to be the URL you want.

Answer 2

You could also use Web NFC to write NDEFMessage with a URL record.

Here's some working code you can try in Chrome for Android:

const ndef = new NDEFReader();
await ndef.write({
  records: [{ recordType: "url", data: "https://webapp.com/profilename" }]
});

Full documentation is available at https://web.dev/nfc/