"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[17482],{79348:(e,t,n)=>{n.d(t,{A:()=>o});n(96540);var s=n(44148),a=n(74848);function o(e){let{path:t}=e;const[n]=(0,s.Dv)("docusaurus.tab.js-ts"),o=t.lastIndexOf("{"),i=t.slice(o+1,t.length-1),[r,d]=i.split(","),c=t.slice(0,o);return(0,a.jsx)("code",{children:c+("js"===n?r:d)})}},83384:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>r,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>c});const s=JSON.parse('{"id":"auth/firebase","title":"Firebase Authentication","description":"To get started, run the setup command:","source":"@site/versioned_docs/version-8.6/auth/firebase.md","sourceDirName":"auth","slug":"/auth/firebase","permalink":"/docs/auth/firebase","draft":false,"unlisted":false,"editUrl":"https://github.com/redwoodjs/redwood/blob/main/docs/docs/auth/firebase.md","tags":[],"version":"8.6","frontMatter":{"sidebar_label":"Firebase"},"sidebar":"main","previous":{"title":"Custom","permalink":"/docs/auth/custom"},"next":{"title":"Netlify","permalink":"/docs/auth/netlify"}}');var a=n(74848),o=n(28453);n(79348);const i={sidebar_label:"Firebase"},r="Firebase Authentication",d={},c=[];function l(e){const t={a:"a",code:"code",h1:"h1",header:"header",p:"p",pre:"pre",...(0,o.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.header,{children:(0,a.jsx)(t.h1,{id:"firebase-authentication",children:"Firebase Authentication"})}),"\n",(0,a.jsx)(t.p,{children:"To get started, run the setup command:"}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-bash",children:"yarn rw setup auth firebase\n"})}),"\n",(0,a.jsxs)(t.p,{children:["This installs all the packages, writes all the files, and makes all the code modifications you need.\nFor a detailed explanation of all the api- and web-side changes that aren't exclusive to Firebase, see the top-level ",(0,a.jsx)(t.a,{href:"/docs/authentication",children:"Authentication"})," doc.\nFor now, let's focus on Firebase's side of things."]}),"\n",(0,a.jsxs)(t.p,{children:["If you don't have a Firebase account yet, now's the time to make one: navigate to ",(0,a.jsx)(t.a,{href:"https://firebase.google.com",children:"https://firebase.google.com"})," and click \"Go to console\", sign up, and create a project.\nAfter it's ready, we'll get the API keys."]}),"\n",(0,a.jsxs)(t.p,{children:["To get the API keys, we need to add a web app to our project.\nClick the ",(0,a.jsx)(t.code,{children:"</>"}),' icon in main call to action on the dashboard\u2014"Get started by adding Firebase to your app".\nGive your app a nickname, then you should see the API keys.\nSince we\'re only using Firebase for auth, we only need ',(0,a.jsx)(t.code,{children:"apiKey"}),", ",(0,a.jsx)(t.code,{children:"authDomain"}),", and ",(0,a.jsx)(t.code,{children:"projectId"}),".\nCopy them into your project's ",(0,a.jsx)(t.code,{children:".env"})," file:"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-bash",metastring:'title=".env"',children:'FIREBASE_API_KEY="..."\nFIREBASE_AUTH_DOMAIN="..."\nFIREBASE_PROJECT_ID="..."\n'})}),"\n",(0,a.jsxs)(t.p,{children:["Lastly, include ",(0,a.jsx)(t.code,{children:"FIREBASE_API_KEY"})," and ",(0,a.jsx)(t.code,{children:"FIREBASE_AUTH_DOMAIN"})," in the list of env vars that should be available to the web side (",(0,a.jsx)(t.code,{children:"FIREBASE_PROJECT_ID"})," is for the api side):"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-toml",metastring:'title="redwood.toml"',children:'[web]\n  # ...\n  includeEnvironmentVariables = ["FIREBASE_API_KEY", "FIREBASE_AUTH_DOMAIN"]\n'})}),"\n",(0,a.jsx)(t.p,{children:"We've hooked up our Firebase app to our Redwood app, but if you try it now, it won't work.\nThat's because we haven't actually enabled auth in our Firebase app yet."}),"\n",(0,a.jsx)(t.p,{children:'Back to the dashboard one more time: in the nav on the left, click "Build", "Authentication", and "Get started".\nWe\'re going to go with "Email/Password" here, but feel free to configure things as you wish.\nClick "Email/Password", enable it, and click "Save".'}),"\n",(0,a.jsxs)(t.p,{children:["That should be enough; now, things should just work.\nLet's make sure: if this is a brand new project, generate a home page.\nThere we'll try to sign up by destructuring ",(0,a.jsx)(t.code,{children:"signUp"})," from the ",(0,a.jsx)(t.code,{children:"useAuth"})," hook (import that from ",(0,a.jsx)(t.code,{children:"'src/auth'"}),"). We'll also destructure and display ",(0,a.jsx)(t.code,{children:"isAuthenticated"})," to see if it worked:"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-tsx",metastring:'title="web/src/pages/HomePage.tsx"',children:"import { useAuth } from 'src/auth'\n\nconst HomePage = () => {\n  const { isAuthenticated, signUp } = useAuth()\n\n  return (\n    <>\n      {/* MetaTags, h1, paragraphs, etc. */}\n\n      <p>{JSON.stringify({ isAuthenticated })}</p>\n      <button\n        onClick={() =>\n          signUp({\n            // email: 'your.email@email.com',\n            // password: 'super secret password',\n          })\n        }\n      >\n        sign up\n      </button>\n    </>\n  )\n}\n"})}),"\n",(0,a.jsxs)(t.p,{children:["\"Email/Password\" says what it means: Firebase doesn't redirect to a hosted sign-up page or open a sign-up modal.\nIn a real app, you'd build a form here, but we're going to hardcode an email and password.\nAfter you sign up, you should see ",(0,a.jsx)(t.code,{children:'{"isAuthenticated":true}'})," on the page."]})]})}function h(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(l,{...e})}):l(e)}},28453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>r});var s=n(96540);const a={},o=s.createContext(a);function i(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]);