\n\/\/ frontend\/gatsby-node.js\n\n\/\/ Implement the Gatsby API \u201conCreatePage\u201d. This is\n\/\/ called after every page is created.\nexports.onCreatePage = async ({ page, actions }) => {\n const { createPage } = actions\n\n \/\/ page.matchPath is a special key that's used for matching pages\n \/\/ only on the client.\n if (page.path.match(\/^\\\/app\/)) {\n page.matchPath = "\/app\/*"\n\n \/\/ Update the page.\n createPage(page)\n }\n}\n<\/pre><\/div>\n\n\nNow we need to create an app.js to generate the restricted access pages.<\/p>\n\n\n
\ntouch frontend\/src\/pages\/app.js\n<\/pre><\/div>\n\n\n\/\/ frontend\/src\/pages\/app.js\n\nimport React from "react"\nimport { Router } from "@reach\/router"\nimport Layout from "..\/components\/layout"\nimport Profile from "..\/components\/profile"\nimport Login from "..\/components\/login"\n\nconst App = () => (\n <Layout>\n <Router>\n <Profile path="\/app\/profile" \/>\n <Login path="\/app\/login" \/>\n <\/Router>\n <\/Layout>\n)\n\nexport default App\n<\/pre><\/div>\n\n\nNext, lets create the components for these two routes:<\/p>\n\n\n
\ntouch frontend\/src\/components\/profile.js\n<\/pre><\/div>\n\n\n\/\/ frontend\/src\/components\/profile.js\n\nimport React from "react"\n\nconst Profile = () => (\n <>\n <h1>Your profile<\/h1>\n <ul>\n <li>Name: Your name will appear here<\/li>\n <li>E-mail: And here goes the mail<\/li>\n <\/ul>\n <\/>\n)\n\nexport default Profile\n<\/pre><\/div>\n\n\ntouch frontend\/src\/components\/login.js\n<\/pre><\/div>\n\n\nConnecting to Django as the Authentication Service<\/h4>\n\n\n\n
This is where we diverge from the Gatsby authentication tutorial in order for us to connect to our Django backend which will handle user authentication leveraging JWT.<\/p>\n\n\n
\n\/\/ frontend\/src\/components\/login.js\n\nimport React from "react"\nimport { navigate } from "gatsby"\nimport { useMutation } from "@apollo\/client"\nimport gql from "graphql-tag"\nimport styled from "styled-components"\n\n\/\/ Request token from Django JWT\nconst LOGIN_MUTATION = gql`\n mutation tokenAuth($username: String!, $password: String!) {\n tokenAuth(username: $username, password: $password) {\n token\n }\n }\n`\n\/*\n * Begin Styled Components\n*\/\nconst FormHeader = styled.div`\n font-size: 2.0rem;\n`\n\nconst LoginErrorWrapper = styled.div`\n color: red;\n padding: 0.2rem;\n font-size: 1.4rem;\n font-weight: bold;\n`\nconst FormWrapper = styled.div`\n div {\n margin-bottom: 1.0rem;\n }\n label {\n text-align: right;\n width: 300px;\n }\n input {\n float: right;\n margin-left: 1.0rem;\n }\n`\nconst ButtonWrapper = styled.div`\n width: 100%;\n text-align: center;\n button {\n margin-top: 0.5rem;\n width: 100px;\n background-color: red;\n color: white;\n padding: 0.2rem 1.0rem;\n font-weight: bold;\n cursor: pointer;\n }\n`\n\nconst Login = (props) => {\n let username = ''\n let password = ''\n\n const [tokenAuth, { data, error }] = useMutation(LOGIN_MUTATION, {\n\n onCompleted({ tokenAuth }) {\n let jwtToken = "JWT" + tokenAuth.token\n\n localStorage.setItem("token", jwtToken)\n navigate(`\/app\/profile`)\n }\n })\n\n let loginError = ''\n if (error) {\n loginError = 'Incorrect credentials'\n }\n\n return (\n <FormWrapper>\n <LoginErrorWrapper>{loginError}<\/LoginErrorWrapper>\n\n <FormHeader>Log in<\/FormHeader>\n\n <form\n method = "post"\n onSubmit = {e => {\n e.preventDefault()\n tokenAuth({ variables: {\n username: username.value,\n password: password.value,\n }})\n }}\n >\n <div>\n <label>\n Username:\n <input \n ref = { node => {\n username = node\n }}\n type = "text" name="username"\n \/> \n <\/label>\n <\/div>\n\n <div>\n <label>\n Password:\n <input \n ref = { node => {\n password = node\n }}\n type = "password"\n name = "password"\n \/>\n <\/label>\n <\/div>\n\n <ButtonWrapper>\n <button type = "submit">Log in<\/button>\n <\/ButtonWrapper>\n <\/form>\n <\/FormWrapper>\n )\n}\n\nexport default Login\n<\/pre><\/div>\n\n\nControlling Private Routes<\/h4>\n\n\n\n
Next, we wrap our restricted routes inside a PrivateRoute component:<\/p>\n\n\n