{
    "componentChunkName": "component---src-components-blog-post-jsx",
    "path": "/blog/creating-protected-routes-in-next-js-with-supabase/",
    "result": {"data":{"site":{"siteMetadata":{"author":"Monica Powell","siteUrl":"https://www.aboutmonica.com"}},"mdx":{"id":"bafb6ea1-8b2e-5a8e-a33e-582ce59a1006","timeToRead":4,"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Creating Protected Routes In NextJS With Supabase\",\n  \"date\": \"2021-03-13T23:27:48.599Z\",\n  \"template\": \"post\",\n  \"draft\": true,\n  \"slug\": \"creating-protected-routes-in-next-js-with-supabase\",\n  \"category\": [\"tutorial\"],\n  \"tags\": [\"NextJS\", \"Supabase\"],\n  \"description\": \"This articles walks through how to create protected routes on NextJS with Supabase&#x27;s user management.\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Callout = makeShortcode(\"Callout\");\nvar TableOfContents = makeShortcode(\"TableOfContents\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Callout, {\n    variant: \"garden\",\n    mdxType: \"Callout\"\n  }, \"This articles walks through how to create protected routes on NextJS with Supabase's user management. It assumes you already have a NextJS site up and running with the ability to create new Supabase users but if not check out the first part of this series on \", mdx(\"a\", {\n    href: \"/blog/creating-new-supabase-users-in-next-js\"\n  }, \"creating new Supabase users in NextJS\")), mdx(TableOfContents, {\n    headings: props.tableOfContents,\n    mdxType: \"TableOfContents\"\n  }), mdx(\"h2\", {\n    \"id\": \"supabase-auth-overview\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#supabase-auth-overview\",\n    \"aria-label\": \"supabase auth overview permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Supabase Auth Overview\"), mdx(\"p\", null, \"Supabase has various methods in their JavaScript client library to handle user authentication and uses JSON Web Tokens (JWT) under the hood to manage authentication. If you want to learn more about how Auth works in Supabase check out the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://supabase.io/docs/learn/auth-deep-dive/auth-deep-dive-jwts\"\n  }, \"Supabase auth deep-dive video series\"), \". In order to have protected routes on our NextJS site, we'll need a way to register and authenticate users. We can perform these user actions and checks with the following methods from the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://supabase.io/docs/client/supabase-client\"\n  }, \"Supabase Auth client\"), \". :\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://supabase.io/docs/client/auth-signup\"\n  }, \"supabase.auth.signUp\"), \" - We should give users the ability to create an account (covered in the first article on \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/blog/creating-new-supabase-users-in-next-js\"\n  }, \"creating new Supabase users in NextJS\"), \") \"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://supabase.io/docs/client/auth-signin\"\n  }, \"supabase.auth.signIn\"), \" - We need to give users the ability to sign-in. In this particular article, we'll cover the traditional method of using a username and password for sign-in but Supabase also supports other ways to log in, including OAuth providers (GitHub, Google, etc.) and magic links.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://supabase.io/docs/client/auth-user\"\n  }, \"supabase.auth.user\"), \" - We need a way to determine if a user is currently logged-in in order to ensure that logged-out users are not able to view pages that should only be accessible to logged-in users and that the proper information is displayed in various places like the site navigation.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://supabase.io/docs/client/auth-signout\"\n  }, \"supabase.auth.signOut\"), \" - We should give users the ability to sign out and unauthenticate their session.\")), mdx(\"h2\", {\n    \"id\": \"create-protected-route\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#create-protected-route\",\n    \"aria-label\": \"create protected route permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Create Protected Route\"), mdx(\"p\", null, \"In order to create a protected route we need to have a particular page component we'd like to protect. For this example let's created a protected page at \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"pages/protected.js\"), \" that we can view at \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"localhost:3000/protected\"), \" when our site is running locally. This protected page will make a fetch request to a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"getUser\"), \" API route  to determine if there is currently an authenticated user loading the page.  The API call should return the current user when there is one. We can then use this API response to redirect the page to the login page when there is no current user and only display user-specific information on the protected route when there is a user.\"), mdx(\"p\", null, \"The API request can be made with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"getServerSideProps()\"), \" which is a NextJS function that is called before a page renders. This allows us to redirect before the page renders based on the response from the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"getUser\"), \" API call.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"import { basePath } from \\\"../utils/siteConfig\\\";\\n\\nexport async function getServerSideProps() {\\n    // We need to implement `/api/getUser` by creating \\n    // an endpoint in `pages/api` but for now let's just call it\\n  const response = await fetch(`${basePath}/api/getUser`).then((response) =>\\n    response.json()\\n  );\\n\\n  const { user } = response;\\n\\n // If the `getUser` endpoint doesn't have a user in its response\\n // then we will redirect to the login page\\n // which means this page will only be viewable when `getUser` returns a user.\\n\\n  if (!user) {\\n    return {\\n      redirect: { destination: \\\"/login\\\", permanent: false },\\n    };\\n  }\\n  // We'll pass the returned `user` to the page's React Component as a prop\\n  return { props: { user } };\\n}\\nexport default function Protected({ user }) {\\n  return (\\n          <p>\\n          // Let's greet the user by their e-mail address\\n            Welcome {user.email}!{\\\" \\\"}\\n            <span role=\\\"img\\\" aria-label=\\\"waving hand\\\">\\n              \\uD83D\\uDC4B\\uD83C\\uDFFE\\n            </span>{\\\" \\\"}\\n          </p>{\\\" \\\"}\\n          You are currently viewing a top secret page!\\n  );\\n}\\n\")), mdx(Callout, {\n    variant: \"danger\",\n    mdxType: \"Callout\"\n  }, \"In this instance, NextJS requires absolute paths for the API routes and if you do not have an absolute route then you'll receive the following error:\", mdx(\"b\", null, \"\\\"Error: only absolute urls are supported\\\"\"), \". In order to resolve this I created a helper function in \", mdx(\"b\", null, \"utils/siteConfig\"), \" to set the basePath based on the environment. In order for this to work there needs to be a \", mdx(\"b\", null, \"PRODUCTION_URL\"), \" set in your deployed site's environment variables.\", mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const dev = process.env.NODE_ENV !== \\\"production\\\";\\nexport const basePath = dev ? \\\"http://localhost:3000\\\" : process.env.PRODUCTION_URL;\\n\"))), mdx(\"p\", null, \"Now, we need to actually implement the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"getUser\"), \" API route that the protected route is calling by creating a file \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"pages/api/getUser.js\"), \". Within this file we will make a request to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"supabase.auth.user()\"), \" which returns the current user when there is a user currently logged-in.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"import { supabase } from \\\"../../utils/supabaseClient\\\";\\n\\nexport default async function getUser(req, res) {\\n  const user = await supabase.auth.user();\\n  return res.status(200).json({ user: user });\\n}\\n\")), mdx(\"p\", null, \"The above code assumes that you've already set up a Supabase Client which we covered in the \", mdx(\"a\", {\n    href: \"/blog/creating-new-supabase-users-in-next-js\"\n  }, \"first post of this series\"), \". The Supabase client we are using in this instance looks like the below and uses environment variables to determine the Supabase DB URL and associated key:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"import { createClient } from \\\"@supabase/supabase-js\\\";\\n\\nconst supabaseUrl = process.env.SUPABASE_URL;\\nconst supabaseKey = process.env.SUPABASE_KEY;\\n\\nexport const supabase = createClient(supabaseUrl, supabaseKey);\\n\")), mdx(\"p\", null, \"You can retrieve the API key and database URL associated with your Supabase project from \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"https://app.supabase.io/project/yourprojecturl]/settings/api\"), \" which can be navigated to by going to your project > settings > API.\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/supabase-settings.png\",\n    \"alt\": null\n  }), \"\\n\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"a screenshot of the Supabase settings page\")), mdx(\"h2\", {\n    \"id\": \"sign-in-and-redirect-to-protected-page\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#sign-in-and-redirect-to-protected-page\",\n    \"aria-label\": \"sign in and redirect to protected page permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Sign-in and Redirect to Protected Page\"), mdx(\"p\", null, \"We'll allow folks to log in and log out of the site using the sitewide navigation. In order to show the appropriate links based on authentication status, we can use the state to track if a user is currently authenticated. As a default, we'll set authentication status to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"false\"), \" so that the navigation defaults to thelogged-out view. \"), mdx(\"p\", null, \"When a user is authenticated then we will show the Sign Out text in the nav: \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/logged-in-nav.png\",\n    \"alt\": null\n  })), mdx(\"p\", null, \"If there is no authenticated user then we will link to the Sign-in and Sign Up pages: \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/logged-out-nav.png\",\n    \"alt\": null\n  })), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"import Link from \\\"next/link\\\";\\nimport { useEffect, useState } from \\\"react\\\";\\n\\nexport default function Header() {\\n  const router = useRouter();\\n  // Let's use state to track if a user is currently authenticated\\n  // As a default we'll set this value to false so that the navigation defaults to thelogged-out view\\n  const [isAuthed, setAuthStatus] = useState(false);\\n\\n // We'll set up the nav, on mount to call the getUser endpoint we just \\n // created to determine if a user is currently logged-in or not\\n  useEffect(() => {\\n    fetch(\\\"./api/getUser\\\")\\n      .then((response) => response.json())\\n      .then((result) => {\\n        setAuthStatus(result.user && result.user.role === \\\"authenticated\\\");\\n      });\\n  }, []);\\n\\n  return (\\n \\n      <nav>\\n        <div>\\n        // If user is authenticated then we will show the Sign Out text\\n          {isAuthed ? (\\n            <span>\\n              <h3>Sign Out &rarr;</h3>\\n            </span>\\n          ) : (\\n              // If there is no authenticated user then we will link to the Sign-in and Sign Up pages\\n            <>\\n              <Link href=\\\"/signup\\\">\\n                <h3>Sign Up &rarr;</h3>\\n              </Link>\\n              <Link href=\\\"/login\\\">\\n                <h3>Login &rarr;</h3>\\n              </Link>\\n            </>\\n          )}\\n        </div>\\n      </nav>\\n  );\\n}\\n\")), mdx(\"p\", null, \"When a user clicks \\\"Sign In\\\" from the nav we will navigate the user to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"login\"), \" page which contains a form to allow users to sign-in. The form will collect a user's email and password and on submit will fire a function \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"signInUser\"), \" which makes an API request to an API route for \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"login\"), \" and passes the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"email\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"password\"), \" values from the form submit event to the API. If all goes well then we will receive a user object and can redirect (using NextJS's client-side router) to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"/protected\"), \" route that serves as a landing page for logged-in users.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"import { useRouter } from \\\"next/router\\\";\\n\\nexport default function Form() {\\n  const router = useRouter();\\n  const signInUser = async (event) => {\\n    event.preventDefault();\\n\\n    const res = await fetch(`/api/login`, {\\n      body: JSON.stringify({\\n        email: event.target.email.value,\\n        password: event.target.password.value,\\n      }),\\n      headers: {\\n        \\\"Content-Type\\\": \\\"application/json\\\",\\n      },\\n      method: \\\"POST\\\",\\n    });\\n\\n    const { user } = await res.json();\\n    if (user) router.push(`/protected`);\\n  };\\n\\n  return (\\n    <form onSubmit={signInUser}>\\n      <label htmlFor=\\\"email\\\">Email</label>\\n      <input\\n        id=\\\"email\\\"\\n        name=\\\"email\\\"\\n        type=\\\"email\\\"\\n        autoComplete=\\\"email\\\"\\n        required\\n      />\\n      <label htmlFor=\\\"password\\\">Password</label>\\n\\n      <input\\n        type=\\\"password\\\"\\n        id=\\\"password\\\"\\n        name=\\\"password\\\"\\n        required\\n      />\\n      <button type=\\\"submit\\\">Login</button>\\n    </form>\\n  );\\n}\\n\")), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"login\"), \" API route will use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"supabase.auth.signIn\"), \" to sign-in a user. If a user is successfully signed in then the API will return a 200 response, or else the API will return a 401 response. The form is not yet set up to handle this 401 response but ideally, we'd want to return some type of message to the user informing them that their credentials were invalid and prompt them to attempt to sign-in again or reset their password. However, as this app is currently being built the functionality to reset password does not yet exist so this error path cannot be fully handled yet.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"import { supabase } from \\\"../../utils/supabaseClient\\\";\\n\\nexport default async function registerUser(req, res) {\\n  const { email, password } = req.body;\\n  let { user, error } = await supabase.auth.signIn({\\n    email: email,\\n    password: password,\\n  });\\n  if (error) return res.status(401).json({ error: error.message });\\n  return res.status(200).json({ user: user });\\n}\\n\")), mdx(\"h2\", {\n    \"id\": \"sign-out-and-redirect-to-homepage\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#sign-out-and-redirect-to-homepage\",\n    \"aria-label\": \"sign out and redirect to homepage permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Sign Out and Redirect to Homepage\"), mdx(\"p\", null, \"Let's update the Sign Out link in the header to be functional by creating a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"signOut\"), \" function that fires on click of the Sign Out text.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"<span onClick={signOutUser}>\\n   <h3>Sign Out &rarr;</h3>\\n</span>        \\n\")), mdx(\"p\", null, \"We'll also want to import a router from \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"next/router\"), \" to handle our client-side redirect.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"import { useRouter } from \\\"next/router\\\";\\n\")), mdx(\"p\", null, \"For \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"signOutUser\"), \" let's make a call to a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"logout\"), \" API route that sets the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"authStatus\"), \" to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"false\"), \" when a user is successfully signed out. We also want to ensure that when a user is not logged-in they are not viewing an authenticated page by redirecting to the homepage if a user logs out on a page other than the homepage. Without explicitly redirecting to the homepage when a user signs out, the state of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"authStatus\"), \" would change in the nav as well as the logged-in vs.logged-out specific text however, the actual page regardless of authentication would continue showing protected information for unauthenticated users which we don't want.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"  const signOutUser = async () => {\\n    const res = await fetch(`/api/logout`);\\n    if (res.status === 200) setAuthStatus(false);\\n    // redirect to homepage when logging out users\\n    if (window.location !== \\\"/\\\") router.push(\\\"/\\\");\\n  };\\n\")), mdx(\"p\", null, \"Now we need to create the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"/api/logout\"), \" route so that we can actually use it when the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"signOutUser\"), \" function fires.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"import { supabase } from \\\"../../utils/supabaseClient\\\";\\n\\nexport default async function logoutUser(req, res) {\\n  let { error } = await supabase.auth.signOut();\\n\\n  if (error) return res.status(401).json({ error: error.message });\\n  return res.status(200).json({ body: \\\"User has been logged out\\\" });\\n}\\n\")), mdx(\"h2\", {\n    \"id\": \"summary\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#summary\",\n    \"aria-label\": \"summary permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Summary\"), mdx(\"p\", null, \"So in conclusion, we created a protected route by creating a page component in NextJS that calls a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"getUser\"), \" endpoint in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"getServerSideProps()\"), \" and redirects to the log in page, instead of loading the protected route, when there is not a user returned. We also set up client-side routing to redirect users to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"/protected\"), \" when they successfully logged-in and to the homepage \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"/\"), \" when they logged out. The core functionality to update and check authentication was handle in API routes using Supabase's various auth methods (signIn, signOut, user).\"), mdx(\"h2\", {\n    \"id\": \"example-code-on-github\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#example-code-on-github\",\n    \"aria-label\": \"example code on github permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Example Code on GitHub\"), mdx(\"p\", null, \"You can view the full source code for the example code at: \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/M0nica/protected-routes-with-supabase-nextjs-example\"\n  }, \"https://github.com/M0nica/protected-routes-with-supabase-nextjs-example\")), mdx(\"h2\", {\n    \"id\": \"looking-ahead\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#looking-ahead\",\n    \"aria-label\": \"looking ahead permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Looking Ahead\"), mdx(\"p\", null, \"I am looking forward to sharing more about the app development as I progress through my journey of developing \", mdx(\"a\", {\n    href: \"https://shinedocs.com\"\n  }, \"Shine Docs\"), \" . As I wrap up the authentication for this site I am considering adding additional functionality like magic links or other auth providers, which are natively supported by Supabase. Before I extend the auth functionality to support additional ways of authenticating I will need to update the site to give users the ability to reset their own password and better handle authentication errors to ensure that the sign-in (are the user credentials invalid? did something go wrong during sign-in?) and sign up (has an e-mail already been claimed? is a password not secure enough?) flow are as seamless as possible.\"));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#supabase-auth-overview","title":"Supabase Auth Overview"},{"url":"#create-protected-route","title":"Create Protected Route"},{"url":"#sign-in-and-redirect-to-protected-page","title":"Sign-in and Redirect to Protected Page"},{"url":"#sign-out-and-redirect-to-homepage","title":"Sign Out and Redirect to Homepage"},{"url":"#summary","title":"Summary"},{"url":"#example-code-on-github","title":"Example Code on GitHub"},{"url":"#looking-ahead","title":"Looking Ahead"}]},"frontmatter":{"title":"Creating Protected Routes In NextJS With Supabase","date":"March 13, 2021","description":"This articles walks through how to create protected routes on NextJS with Supabase&#x27;s user management.","tags":["NextJS","Supabase"]}},"allWebMentionEntry":{"edges":[{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/like/twitter/indigitalcolor/1371436620268904456/2542421605","wmProperty":"like-of","wmId":1081231,"type":"entry","url":"https://twitter.com/indigitalcolor/status/1371436620268904456#favorited-by-2542421605","likeOf":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","author":{"url":"https://twitter.com/bagcilaring","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6a13d19260e0fd8c32c26a7bb1e3a1eb5eec2e194b8daeb9241806b90441d5d8.jpg","name":"Ataman"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/like/twitter/indigitalcolor/1371436620268904456/1014505414761721858","wmProperty":"like-of","wmId":1081232,"type":"entry","url":"https://twitter.com/indigitalcolor/status/1371436620268904456#favorited-by-1014505414761721858","likeOf":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","author":{"url":"https://twitter.com/orlowdev","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/ee81996500f23d75d46828df61ea35b86f320a1ffe290deae92349d5c32df29a.jpg","name":"ll↓"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/like/twitter/indigitalcolor/1371436620268904456/3115345708","wmProperty":"like-of","wmId":1080648,"type":"entry","url":"https://twitter.com/indigitalcolor/status/1371436620268904456#favorited-by-3115345708","likeOf":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","author":{"url":"https://twitter.com/maxcell","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/a883720df399748ec3c5e79fdb00e3bcfa1aed681d0b2db5977e20976816186d.jpg","name":"Prince Wilson"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/like/twitter/indigitalcolor/1371436620268904456/26478474","wmProperty":"like-of","wmId":1080528,"type":"entry","url":"https://twitter.com/indigitalcolor/status/1371436620268904456#favorited-by-26478474","likeOf":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","author":{"url":"https://twitter.com/diegomenezes","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/bdd84a3b905fda418c49d36fdd81c92e88a33a6400a55cb3e7de51fdb69ad358.jpg","name":"Diego M. G. Vieira"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/like/twitter/indigitalcolor/1371436620268904456/242417063","wmProperty":"like-of","wmId":1080443,"type":"entry","url":"https://twitter.com/indigitalcolor/status/1371436620268904456#favorited-by-242417063","likeOf":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","author":{"url":"https://twitter.com/Toyo_Tomi","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/0bc5a96256ead6250d81c76b2d91d1c697ec1bed897c6670cbc6988d90f83f0b.jpg","name":"Tatsuya Nakadai"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/like/twitter/indigitalcolor/1371436620268904456/12087242","wmProperty":"like-of","wmId":1080442,"type":"entry","url":"https://twitter.com/indigitalcolor/status/1371436620268904456#favorited-by-12087242","likeOf":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","author":{"url":"https://twitter.com/jhooks","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/c39af032051e4fd184753b73864eac35bcc5d88e2031602bb1cf1fdeb6856424.jpg","name":"Joel is working ⛈"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/repost/twitter/indigitalcolor/1371436620268904456/1372596624728281089","wmProperty":"repost-of","wmId":1080441,"type":"entry","url":"https://twitter.com/jhooks/status/1372596624728281089","likeOf":null,"author":{"url":"https://twitter.com/jhooks","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/c39af032051e4fd184753b73864eac35bcc5d88e2031602bb1cf1fdeb6856424.jpg","name":"Joel is working ⛈"},"published":"March 18, 2021","content":{"text":"My goal for this week of the @eggheadio adventure club was to give logged-in users the ability to log out 😆. \n\nI wrote about using @supabas"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/repost/twitter/indigitalcolor/1371436620268904456/1372599774352830465","wmProperty":"repost-of","wmId":1080440,"type":"entry","url":"https://twitter.com/chrisbiscardi/status/1372599774352830465","likeOf":null,"author":{"url":"https://twitter.com/chrisbiscardi","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6cb62548f7ea6e68607b69c1553bde1fcfef10b564e7f87d10e7a8def2dee7dc.png","name":"🦀 :party-corgi: 🦀"},"published":"March 18, 2021","content":{"text":"My goal for this week of the @eggheadio adventure club was to give logged-in users the ability to log out 😆. \n\nI wrote about using @supabas"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/like/twitter/indigitalcolor/1371436620268904456/1188962486898384897","wmProperty":"like-of","wmId":1080439,"type":"entry","url":"https://twitter.com/indigitalcolor/status/1371436620268904456#favorited-by-1188962486898384897","likeOf":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","author":{"url":"https://twitter.com/realmichaelye","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/136f261ebf0ccfe70a47a9f5e15c6f4b50eb9c5ac73ee95b015703a50c280dc8.jpg","name":"Michael Ye"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/like/twitter/indigitalcolor/1371436620268904456/2510442000","wmProperty":"like-of","wmId":1080437,"type":"entry","url":"https://twitter.com/indigitalcolor/status/1371436620268904456#favorited-by-2510442000","likeOf":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","author":{"url":"https://twitter.com/HoracioSystem","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/bc4778c9e50b54c6d3cdcc257ba7a9d481e80184234f2bf2384735bd9a64a27e.jpg","name":"Horacio A Fernandes"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/like/twitter/indigitalcolor/1371436620268904456/240315182","wmProperty":"like-of","wmId":1080438,"type":"entry","url":"https://twitter.com/indigitalcolor/status/1371436620268904456#favorited-by-240315182","likeOf":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","author":{"url":"https://twitter.com/chrisbiscardi","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6cb62548f7ea6e68607b69c1553bde1fcfef10b564e7f87d10e7a8def2dee7dc.png","name":"🦀 :party-corgi: 🦀"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/like/twitter/indigitalcolor/1371436620268904456/351262288","wmProperty":"like-of","wmId":1075742,"type":"entry","url":"https://twitter.com/indigitalcolor/status/1371436620268904456#favorited-by-351262288","likeOf":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","author":{"url":"https://twitter.com/fabianbrash","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/0ce0e92ea236b019dd044f723456d7e6ac3d10cf2fc202fc350082fce049c974.jpg","name":"Fabian Brash"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/repost/twitter/indigitalcolor/1371436620268904456/1371726808865968129","wmProperty":"repost-of","wmId":1075741,"type":"entry","url":"https://twitter.com/fabianbrash/status/1371726808865968129","likeOf":null,"author":{"url":"https://twitter.com/fabianbrash","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/0ce0e92ea236b019dd044f723456d7e6ac3d10cf2fc202fc350082fce049c974.jpg","name":"Fabian Brash"},"published":"March 16, 2021","content":{"text":"My goal for this week of the @eggheadio adventure club was to give logged-in users the ability to log out 😆. \n\nI wrote about using @supabas"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/repost/twitter/indigitalcolor/1371436620268904456/1371638164884840450","wmProperty":"repost-of","wmId":1075444,"type":"entry","url":"https://twitter.com/digiangler/status/1371638164884840450","likeOf":null,"author":{"url":"https://twitter.com/digiangler","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/134674c362f8247130c0ee8be666a3f6fc430ebde2e27b4726b481e6b7b95082.jpg","name":"おおとろ＠エンジニア | 𝔇𝔦𝔤𝔦-𝔄𝔫𝔤𝔩𝔢𝔯"},"published":"March 16, 2021","content":{"text":"My goal for this week of the @eggheadio adventure club was to give logged-in users the ability to log out 😆. \n\nI wrote about using @supabas"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/repost/twitter/indigitalcolor/1371436620268904456/1371638248498401282","wmProperty":"repost-of","wmId":1075442,"type":"entry","url":"https://twitter.com/powerupcoding1/status/1371638248498401282","likeOf":null,"author":{"url":"https://twitter.com/powerupcoding1","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/a7e10bf08ecc9563c392c8621de476a0e425b132057497e91aec98f8202ba884.png","name":"powerupcoding"},"published":"March 16, 2021","content":{"text":"My goal for this week of the @eggheadio adventure club was to give logged-in users the ability to log out 😆. \n\nI wrote about using @supabas"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/like/twitter/indigitalcolor/1371436620268904456/862593152","wmProperty":"like-of","wmId":1075443,"type":"entry","url":"https://twitter.com/indigitalcolor/status/1371436620268904456#favorited-by-862593152","likeOf":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","author":{"url":"https://twitter.com/digiangler","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/134674c362f8247130c0ee8be666a3f6fc430ebde2e27b4726b481e6b7b95082.jpg","name":"おおとろ＠エンジニア | 𝔇𝔦𝔤𝔦-𝔄𝔫𝔤𝔩𝔢𝔯"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/like/twitter/indigitalcolor/1371436620268904456/1052334971799535616","wmProperty":"like-of","wmId":1074946,"type":"entry","url":"https://twitter.com/indigitalcolor/status/1371436620268904456#favorited-by-1052334971799535616","likeOf":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","author":{"url":"https://twitter.com/_dijonmusters","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/5a031c0bf8cc54812aa28c0a2d90794fe2a5ae9b6902340820e3f99c5429794f.jpg","name":"Jon Meyers"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/like/twitter/indigitalcolor/1371436620268904456/1254335705901420545","wmProperty":"like-of","wmId":1074180,"type":"entry","url":"https://twitter.com/indigitalcolor/status/1371436620268904456#favorited-by-1254335705901420545","likeOf":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","author":{"url":"https://twitter.com/joyancefa","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/3b961b83797b423d96df260d4b98b367053e7e32d1b1be5a10117c4c23e9f8b2.jpg","name":"Fatou 👩🏾‍💻"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/like/twitter/indigitalcolor/1371436620268904456/1204410560965513217","wmProperty":"like-of","wmId":1074179,"type":"entry","url":"https://twitter.com/indigitalcolor/status/1371436620268904456#favorited-by-1204410560965513217","likeOf":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","author":{"url":"https://twitter.com/VaibhavAcharya_","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/c6ce4a12cb6c9fb02d07af9f656c1e29f1d98ca718898500f64a2b3940a7b6c9.jpg","name":"Vaibhav Acharya"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/like/twitter/indigitalcolor/1371436620268904456/1897795837","wmProperty":"like-of","wmId":1074178,"type":"entry","url":"https://twitter.com/indigitalcolor/status/1371436620268904456#favorited-by-1897795837","likeOf":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","author":{"url":"https://twitter.com/laurosilvacom","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/4bf056cb8881993c4f461b0bd630a046937fee02830387c696e90361290ea53b.jpg","name":"Lauro Silva"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/repost/twitter/indigitalcolor/1371436620268904456/1371484172376809482","wmProperty":"repost-of","wmId":1074177,"type":"entry","url":"https://twitter.com/laurosilvacom/status/1371484172376809482","likeOf":null,"author":{"url":"https://twitter.com/laurosilvacom","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/4bf056cb8881993c4f461b0bd630a046937fee02830387c696e90361290ea53b.jpg","name":"Lauro Silva"},"published":"March 15, 2021","content":{"text":"My goal for this week of the @eggheadio adventure club was to give logged-in users the ability to log out 😆. \n\nI wrote about using @supabas"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/repost/twitter/indigitalcolor/1371436620268904456/1371436663390531587","wmProperty":"repost-of","wmId":1073927,"type":"entry","url":"https://twitter.com/powerupcoding1/status/1371436663390531587","likeOf":null,"author":{"url":"https://twitter.com/powerupcoding1","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/a7e10bf08ecc9563c392c8621de476a0e425b132057497e91aec98f8202ba884.png","name":"powerupcoding"},"published":"March 15, 2021","content":{"text":"My goal for this week of the @eggheadio adventure club was to give logged-in users the ability to log out 😆. \n\nI wrote about using @supabas"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/repost/twitter/indigitalcolor/1371436620268904456/1371440197330628617","wmProperty":"repost-of","wmId":1073928,"type":"entry","url":"https://twitter.com/kiwicopple/status/1371440197330628617","likeOf":null,"author":{"url":"https://twitter.com/kiwicopple","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/b20700920b221e458e950aefecf0086f22dc23e756cc3b2aba61dbea4e97d75f.jpg","name":"Paul Copplestone"},"published":"March 15, 2021","content":{"text":"My goal for this week of the @eggheadio adventure club was to give logged-in users the ability to log out 😆. \n\nI wrote about using @supabas"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/repost/twitter/indigitalcolor/1371436620268904456/1371473667180347394","wmProperty":"repost-of","wmId":1073925,"type":"entry","url":"https://twitter.com/silentworks/status/1371473667180347394","likeOf":null,"author":{"url":"https://twitter.com/silentworks","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/b088f7f9eb631731e49760a1c0d2d432e62ea19d3d72c265f8b4adb346d22de1.jpg","name":"Andrew #ReadyToRoar 🦁"},"published":"March 15, 2021","content":{"text":"My goal for this week of the @eggheadio adventure club was to give logged-in users the ability to log out 😆. \n\nI wrote about using @supabas"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/repost/twitter/indigitalcolor/1371436620268904456/1371442428687781893","wmProperty":"repost-of","wmId":1073926,"type":"entry","url":"https://twitter.com/AntWilson/status/1371442428687781893","likeOf":null,"author":{"url":"https://twitter.com/AntWilson","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/1bc5ac09df4e7f9038d3e2012bf6b30ed4d27ae59c5dd2f182128781b42ca03d.jpg","name":"Ant Wilson"},"published":"March 15, 2021","content":{"text":"My goal for this week of the @eggheadio adventure club was to give logged-in users the ability to log out 😆. \n\nI wrote about using @supabas"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/like/twitter/indigitalcolor/1371436620268904456/279614981","wmProperty":"like-of","wmId":1073923,"type":"entry","url":"https://twitter.com/indigitalcolor/status/1371436620268904456#favorited-by-279614981","likeOf":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","author":{"url":"https://twitter.com/rmaximedev","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/55bf8a583ea1817b000e3fc9555ebaa5e480ff3efd34e61be0cd1a91f62cddef.jpg","name":"Maxime Richard"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/like/twitter/indigitalcolor/1371436620268904456/1219566488325017602","wmProperty":"like-of","wmId":1073924,"type":"entry","url":"https://twitter.com/indigitalcolor/status/1371436620268904456#favorited-by-1219566488325017602","likeOf":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","author":{"url":"https://twitter.com/supabase_io","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6d800067f6f74d46538d8cf4de50dde350d78f5af13b1c2a71460cc58a3d978e.jpg","name":"Supabase"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/like/twitter/indigitalcolor/1371436620268904456/832817861844275200","wmProperty":"like-of","wmId":1073922,"type":"entry","url":"https://twitter.com/indigitalcolor/status/1371436620268904456#favorited-by-832817861844275200","likeOf":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","author":{"url":"https://twitter.com/kiwicopple","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/b20700920b221e458e950aefecf0086f22dc23e756cc3b2aba61dbea4e97d75f.jpg","name":"Paul Copplestone"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/like/twitter/indigitalcolor/1371436620268904456/2351108655","wmProperty":"like-of","wmId":1073920,"type":"entry","url":"https://twitter.com/indigitalcolor/status/1371436620268904456#favorited-by-2351108655","likeOf":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","author":{"url":"https://twitter.com/anniesqueedle","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/8241945e245dffa392477f68612a0d645fb3bab60e8b3515ec4db30f21b23b8c.jpg","name":"Anna Rankin 🖤BLM 🖤"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/like/twitter/indigitalcolor/1371436620268904456/18762994","wmProperty":"like-of","wmId":1073921,"type":"entry","url":"https://twitter.com/indigitalcolor/status/1371436620268904456#favorited-by-18762994","likeOf":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","author":{"url":"https://twitter.com/laralfield","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/2fb5301114074bf1dfa6b6dd18519ba04a665f3e368ff35b6b7d6d7693c66d2e.jpg","name":"Lara Littlefield"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/like/twitter/indigitalcolor/1371436620268904456/238986774","wmProperty":"like-of","wmId":1073918,"type":"entry","url":"https://twitter.com/indigitalcolor/status/1371436620268904456#favorited-by-238986774","likeOf":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","author":{"url":"https://twitter.com/leohxj","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/ca6c04b563be1cb0ccb6f6706cde3b7b57d5c6e1f22d6821db53d41289d0ad21.jpg","name":"Leo Hui"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/like/twitter/indigitalcolor/1371436620268904456/20389052","wmProperty":"like-of","wmId":1073919,"type":"entry","url":"https://twitter.com/indigitalcolor/status/1371436620268904456#favorited-by-20389052","likeOf":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","author":{"url":"https://twitter.com/PureFerret","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/ae9db9702839f2bf24db835613c6fb2b4e92b3e8be6582e1151673c00e7f04db.jpg","name":"AncientSwordRage, Wear a 😷; Cover your 👃"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/comment/twitter/indigitalcolor/1371436620268904456/1371456394671497220","wmProperty":"in-reply-to","wmId":1073917,"type":"entry","url":"https://twitter.com/kiwicopple/status/1371456394671497220","likeOf":null,"author":{"url":"https://twitter.com/kiwicopple","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/b20700920b221e458e950aefecf0086f22dc23e756cc3b2aba61dbea4e97d75f.jpg","name":"Paul Copplestone"},"published":"March 15, 2021","content":{"text":"Done!\n\nsupabase.io/docs/guides/ex…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/like/twitter/indigitalcolor/1371436620268904456/22399680","wmProperty":"like-of","wmId":1073916,"type":"entry","url":"https://twitter.com/indigitalcolor/status/1371436620268904456#favorited-by-22399680","likeOf":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","author":{"url":"https://twitter.com/AntWilson","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/1bc5ac09df4e7f9038d3e2012bf6b30ed4d27ae59c5dd2f182128781b42ca03d.jpg","name":"Ant Wilson"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/comment/twitter/indigitalcolor/1371436620268904456/1371444974592610306","wmProperty":"in-reply-to","wmId":1073914,"type":"entry","url":"https://twitter.com/indigitalcolor/status/1371444974592610306","likeOf":null,"author":{"url":"https://twitter.com/indigitalcolor","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/b17a181a222b006c4de292e40f80a97674c9ce4d5ec3bf2ead3176653549519c.jpg","name":"Monica.dev"},"published":"March 15, 2021","content":{"text":"Sure, that would be great!"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","wmSource":"https://brid.gy/comment/twitter/indigitalcolor/1371436620268904456/1371440669823135754","wmProperty":"in-reply-to","wmId":1073915,"type":"entry","url":"https://twitter.com/kiwicopple/status/1371440669823135754","likeOf":null,"author":{"url":"https://twitter.com/kiwicopple","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/b20700920b221e458e950aefecf0086f22dc23e756cc3b2aba61dbea4e97d75f.jpg","name":"Paul Copplestone"},"published":"March 15, 2021","content":{"text":"Wow. this is 🔥\n\nWould you like me to add this to the Supabase Examples page?\n\nsupabase.io/docs/guides/ex…"}}}]}},"pageContext":{"permalink":"https://www.aboutmonica.com/blog/creating-protected-routes-in-next-js-with-supabase/","slug":"/blog/creating-protected-routes-in-next-js-with-supabase/","prev":{"id":"ad4098eb-d160-5de9-b5ac-d1cce349adfa","frontmatter":{"title":"Getting Started with SVG Animation","category":["tutorial"],"date":"2021-04-13T02:48:42.474Z","slug":"getting-started-with-svg-animation","tags":["CSS","SVG","Animation","Design"],"redirects":null},"fields":{"slug":"/blog/getting-started-with-svg-animation/"}},"next":{"id":"74af4e23-40a4-5870-9136-80bf16cedb48","frontmatter":{"title":"Creating New Supabase Users In NextJS","category":["tutorial"],"date":"2021-03-09T12:01:39.955Z","slug":"creating-new-supabase-users-in-next-js","tags":["NextJS","Supabase"],"redirects":null},"fields":{"slug":"/blog/creating-new-supabase-users-in-next-js/"}}}},
    "staticQueryHashes": ["1977783444","764694655"]}