https://revisit.dev/assets/js/7c4c69d6.c64bc77f.js

1"use strict";(self.webpackChunkdocs_website=self.webpackChunkdocs_website||[]).push([["24688"],{37394(e,t,i){i.r(t),i.d(t,{metadata:()=>n,default:()=>u,frontMatter:()=>o,contentTitle:()=>l,toc:()=>c,assets:()=>d});var n=JSON.parse('{"id":"data-and-deployment/supabase/enabling-authentication","title":"Setting Up Authentication","description":"In order to use authentication, you must have a Supabase application already configured. To set up your Supabase application, please see here.","source":"@site/versioned_docs/version-v2.3.2/data-and-deployment/supabase/enabling-authentication.md","sourceDirName":"data-and-deployment/supabase","slug":"/data-and-deployment/supabase/enabling-authentication","permalink":"/docs/v2.3.2/data-and-deployment/supabase/enabling-authentication","draft":false,"unlisted":false,"editUrl":"https://github.com/revisit-studies/reVISit-studies.github.io/edit/main/versioned_docs/version-v2.3.2/data-and-deployment/supabase/enabling-authentication.md","tags":[],"version":"v2.3.2","lastUpdatedAt":1790372643000,"frontMatter":{},"sidebar":"docs","previous":{"title":"Configuring Supabase","permalink":"/docs/v2.3.2/data-and-deployment/supabase/setup"},"next":{"title":"Deploying To a Static Website","permalink":"/docs/v2.3.2/data-and-deployment/deploying-to-static-website"}}'),a=i(74848),s=i(28453),r=i(34436);let o={},l="Setting Up Authentication",d={},c=[{value:"Enabling Authentication in Supabase",id:"enabling-authentication-in-supabase",level:2},{value:"Enabling Authentication in reVISit",id:"enabling-authentication-in-revisit",level:2},{value:"Manage Administrators in reVISit",id:"manage-administrators-in-revisit",level:2},{value:"Adding Additional Users",id:"adding-additional-users",level:3},{value:"Removing A User",id:"removing-a-user",level:3}];function h(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",p:"p",...(0,s.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.header,{children:(0,a.jsx)(t.h1,{id:"setting-up-authentication",children:"Setting Up Authentication"})}),"\n",(0,a.jsx)(t.admonition,{type:"warning",children:(0,a.jsxs)(t.p,{children:["In order to use authentication, you must have a Supabase application already configured. To set up your Supabase application, please see ",(0,a.jsx)(t.a,{href:"../setup",children:"here"}),"."]})}),"\n",(0,a.jsx)(t.h2,{id:"enabling-authentication-in-supabase",children:"Enabling Authentication in Supabase"}),"\n",(0,a.jsxs)(t.p,{children:["Supabase provides a variety of authentication methods, but reVISit only supports GitHub OAuth for authentication. To enable GitHub OAuth, start by navigating to GitHub and creating a new OAuth application ",(0,a.jsx)(t.a,{href:"http://github.com/settings/developers",children:"here"}),"."]}),"\n",(0,a.jsxs)(t.p,{children:["Give your application a name, such as ",(0,a.jsx)(t.code,{children:"ReVISit Supabase"}),'. For the "Homepage URL", enter the URL where your reVISit application will be hosted (e.g., ',(0,a.jsx)(t.code,{children:"https://my-revisit-app.com"}),"). This must include the ",(0,a.jsx)(t.code,{children:"https://"})," prefix."]}),"\n",(0,a.jsxs)(t.p,{children:['Lastly set the "Authorization callback URL" to ',(0,a.jsx)(t.code,{children:"https://<your-supabase-domain>/auth/v1/callback"}),", replacing ",(0,a.jsx)(t.code,{children:"<your-supabase-domain>"})," with your actual Supabase domain (e.g., ",(0,a.jsx)(t.code,{children:"https://supabase.organization.com/auth/v1/callback"}),")."]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.img,{alt:"GitHub OAuth Setup",src:i(9204).A+"",width:"1064",height:"812"})}),"\n",(0,a.jsxs)(t.p,{children:["After creating the OAuth application, you will be provided with a Client ID. Copy this in to the ",(0,a.jsx)(t.code,{children:"supabase/.env"})," file in the ",(0,a.jsx)(t.code,{children:"GITHUB_OAUTH_CLIENT_ID"})," field."]}),"\n",(0,a.jsxs)(t.p,{children:['Next, generate a new Client Secret by clicking the "Generate a new client secret" button. Copy this in to the ',(0,a.jsx)(t.code,{children:"supabase/.env"})," file in the ",(0,a.jsx)(t.code,{children:"GITHUB_OAUTH_CLIENT_SECRET"})," field."]}),"\n",(0,a.jsxs)(t.p,{children:["Now, set the ",(0,a.jsx)(t.code,{children:"GITHUB_OAUTH_REDI

1RECT_URI"})," field in the ",(0,a.jsx)(t.code,{children:"supabase/.env"}),' file to the same URL you used for the "Authorization callback URL" in GitHub.']}),"\n",(0,a.jsxs)(t.p,{children:["Finally, ensure that your ",(0,a.jsx)(t.code,{children:"SITE_URL"})," field in the ",(0,a.jsx)(t.code,{children:"supabase/.env"})," file is set to the URL where your reVISit application will be hosted (e.g., ",(0,a.jsx)(t.code,{children:"https://my-revisit-app.com/study"}),"). If this is not set, the redirects won't work properly."]}),"\n",(0,a.jsx)(t.h2,{id:"enabling-authentication-in-revisit",children:"Enabling Authentication in reVISit"}),"\n",(0,a.jsx)(t.p,{children:'Through the settings cog on the right of your reVISit application, navigate to the "settings" page. Here, you will see that authentication will be currently disabled with a button to enable authentication.'}),"\n",(0,a.jsx)(t.p,{children:"When you first enable authentication, you will be prompted to sign in using GitHub Oauth. The account chosen will automatically be added as a user. Any other account attempting to log in to reVISit and access these protected routes will be redirected to the login screen."}),"\n",(0,a.jsx)(t.h2,{id:"manage-administrators-in-revisit",children:"Manage Administrators in reVISit"}),"\n",(0,a.jsx)(t.h3,{id:"adding-additional-users",children:"Adding Additional Users"}),"\n",(0,a.jsx)(t.p,{children:'To add another administrator, simply navigate to the settings page (where you enabled authentication) and click on the "Add User" icon to the right of the "Enabled Users" section. Enter the Google account email for the user and click save. They will now be an administrator and will immediately be able to log into your reVISit application.'}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.img,{alt:"Add User",src:i(58187).A+"",width:"1712",height:"580"})}),"\n",(0,a.jsx)(t.h3,{id:"removing-a-user",children:"Removing A User"}),"\n",(0,a.jsx)(t.p,{children:'In the "Enabled Users" section, you will see the "delete" icon to the right of each user aside from yourself. Any administrator is capable of deleting any user from the reVISit system. The only restriction is that you cannot delete yourself and there can never be less than one user.'}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.img,{alt:"Remove User",src:i(93738).A+"",width:"1702",height:"517"})}),"\n","\n",(0,a.jsx)(r.A,{referenceLinks:[{name:"Supabase Setup",url:"../setup"},{name:"Supabase Authentication",url:"https://supabase.com/docs/guides/auth"}]})]})}function u(e={}){let{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(h,{...e})}):h(e)}},58187(e,t,i){i.d(t,{A:()=>n});let n=i.p+"assets/images/add_user-b1ce6a8583d18d8c6fe6f00ba635837e.png"},93738(e,t,i){i.d(t,{A:()=>n});let n=i.p+"assets/images/remove_user-c83c1032303b6717155c102dbe2f61a0.png"},9204(e,t,i){i.d(t,{A:()=>n});let n=i.p+"assets/images/github-oauth-setup-4a26a0002b821691f76f068bb3235b04.png"},34436(e,t,i){i.d(t,{A:()=>p});var n=i(74848);let a={container:"container_xt6w",linkContainer:"linkContainer_RYvw",iconContainer:"iconContainer_M3C8",demosTitle:"demosTitle_CEJp",codesTitle:"codesTitle_Z3_M",referencesTitle:"referencesTitle_uPPp"};var s=i(96540),r=i(40961),o=i(77444),l=i(67066),d=i(37875),c=i(66188),h=i(9526);function u({demoLinks:e,codeLinks:t,referenceLinks:i}

1){let[h,p]=(0,s.useState)(null),[m]=(0,s.useState)(()=>document.createElement("div"));return((0,s.useEffect)(()=>{let e=document.querySelector(".theme-doc-toc-desktop");if(e?.parentElement){let t=e.parentElement;t.insertBefore(m,t.firstChild),p(m)}return()=>{m.remove()}},[m]),(e||t||i)&&h)?r.createPortal((0,n.jsx)("div",{className:a.container,children:(0,n.jsx)(o.A,{type:"note",title:"Relevant Links",children:(0,n.jsxs)("div",{className:a.linkContainer,children:[e&&e.length>0?(0,n.jsxs)("div",{className:a.demosContainer,children:[(0,n.jsxs)("div",{className:a.iconContainer,children:[(0,n.jsx)(l.gc,{icon:c.CQO}),(0,n.jsx)("div",{className:a.demosTitle,children:"Live Demos"})]}),(0,n.jsx)("div",{style:{marginLeft:"23px"},children:e.map(e=>(0,n.jsx)("a",{target:"_blank",href:e.url,children:e.name}))})]}):null,t&&t.length>0?(0,n.jsxs)("div",{className:a.codesContainer,children:[(0,n.jsxs)("div",{className:a.iconContainer,children:[(0,n.jsx)(l.gc,{icon:d.Vz1}),(0,n.jsx)("div",{className:a.codesTitle,children:"Demo Codes"})]}),(0,n.jsx)("div",{style:{marginLeft:"23px"},children:t.map(e=>(0,n.jsx)("a",{target:"_blank",href:e.url,children:e.name}))})]}):null,i&&i.length>0?(0,n.jsxs)("div",{className:a.referencesContainer,children:[(0,n.jsxs)("div",{className:a.iconContainer,children:[(0,n.jsx)(l.gc,{icon:c.h8M}),(0,n.jsx)("div",{className:a.referencesTitle,children:"References"})]}),(0,n.jsx)("div",{style:{marginLeft:"23px"},children:i.map(e=>(0,n.jsx)("a",{target:"_blank",href:e.url,children:e.name}))})]}):null]})})}),h):null}let p=function({demoLinks:e,codeLinks:t,referenceLinks:i}){return(0,n.jsx)(h.A,{children:()=>(0,n.jsx)(u,{demoLinks:e,codeLinks:t,referenceLinks:i})})}}}]);