This is a sample Next.js app showing you how to verify a user owns an account upon logging in to your website. Here is the corresponding YouTube video.

First of all, thank you SO MUCH to Greg who helped me with literally all of this. This would not be possible without his help (and he's also the one who developed this slick stuff!). Check out his Twitter here: https://twitter.com/gregsantos

Often times when creating an application, you want to know a user actually owns an account to get access to certain information. For example, when you use instagram, only you can see your archived posts because they are hidden just for you.

When creating Decentralized Applications, we don't use a username and password. Instead, we use a wallet. So how can we verfify our account to a backend so we can get access to our personalized data? The answer is account proofs.

For helpful information, please see the corresponding documentation: https://github.com/onflow/fcl-js/blob/master/docs/reference/proving-authentication.mdx#authenticating-a-user-using-account-proof

I will simplify an overview for you here:

1. User clicks a login button.
2. Website asks server for a "nonce." You need this nonce to generate an account proof.
3. An account proof is generated, and is sent to a server to check if that nonce was generated by that backend. If it wasn't the validation is invalid. If it does exist, delete it, and continue.
4. Server verified the account proof is valid using FCL.
5. If both of the above are true, the user is validated.

For account proofs to work, you must configure these in your fcl.config:

fcl.config()
  .put("accessNode.api", "https://rest-testnet.onflow.org") // points us to testnet
  .put("discovery.wallet", "https://fcl-discovery.onflow.org/testnet/authn") // allows us to use blocto wallet
  .put("fcl.accountProof.resolver", resolver) // allows us to generate account proof
  .put("env", "testnet") // allows us to validate account proof

Furthermore, your resolver function must return an appIdentifier and a nonce. The nonce is generated by your backend (./pages/api/generate.js), and the appIdentifier is a string naming your application.

const resolver = async () => {
  const response = await fetch('/api/generate');
  const { nonce } = await response.json();
  return {
    appIdentifier: "JacobRocks",
    nonce
  }
}

This will generate an account proof that looks like this:

{
  f_type: "Service",                    // Its a service!
  f_vsn: "1.0.0",                       // Follows the v1.0.0 spec for the service
  type: "account-proof",                // The type of service it is
  method: "DATA",                       // Its data!
  uid: "awesome-wallet#account-proof",  // A unique identifier for the service
  data: {
    f_type: "account-proof",
    f_vsn: "2.0.0"

    // The user's address (8 bytes, i.e 16 hex characters)
    address: "0xf8d6e0586b0a20c7",                 

    // Nonce signed by the current account-proof (minimum 32 bytes in total, i.e 64 hex characters)
    nonce: "75f8587e5bd5f9dcc9909d0dae1f0ac5814458b2ae129620502cb936fde7120a",

    signatures: [CompositeSignature],
  }
}

This is done by passing the account proof to a backend (./utils/login.js) and verifying both the nonce and the account proof (./pages/api/verify.js).