Before we add TinaCMS to the project, we need to create a new page to redirect the user to while authorizing with GitHub. This component will render as a modal during authorization.

Create a new directory in pages, called github and then make a new file, authorizing.tsx.

pages/github/authorizing.tsx

import { useGithubAuthRedirect } from 'react-tinacms-github'

// Our GitHub app redirects back to this page with auth code
export default function Authorizing() {
  // Let the main app know, that we received an auth code from the GitHub redirect
  useGithubAuthRedirect()

  return <h2>Authorizing with GitHub, please wait...</h2>
}

If you restart the dev server and head to http://localhost:3000/github/authorizing, you can see how this page will render. Feel free to swap out the message or add some styles!