1f6ce106ae
Co-authored-by: Joe Haddad <joe.haddad@zeit.co>
2.7 KiB
2.7 KiB
Example: Firebase authentication with a serverless API
This example includes Firebase authentication and serverless API routes. On login, the app calls /api/login
, which stores the user's info (their decoded Firebase token) in a cookie so that it's available server-side in getInitialProps
. On logout, the app calls /api/logout
to destroy the cookie.
How to use
Using create-next-app
Execute create-next-app
with Yarn or npx to bootstrap the example:
npx create-next-app --example with-firebase-authentication with-firebase-authentication-app
# or
yarn create next-app --example with-firebase-authentication with-firebase-authentication-app
Download manually
Download the example:
curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-firebase-authentication
cd with-firebase-authentication
Set up Firebase:
- Create a project at the Firebase console.
- Copy the contents of
.env.example
into a new file called.env
- Get your account credentials from the Firebase console at Project settings > Service accounts, where you can click on Generate new private key and download the credentials as a json file. It will contain keys such as
project_id
,client_email
andclient_id
. Set them as environment variables in the.env
file at the root of this project. - Get your authentication credentials from the Firebase console under Project settings > General> Your apps Add a new web app if you don't already have one. Under Firebase SDK snippet choose Config to get the configuration as JSON. It will include keys like
apiKey
,authDomain
anddatabaseUrl
. Set the appropriate environment variables in the.env
file at the root of this project. - Go to Develop, click on Authentication and in the Sign-in method tab enable authentication for the app.
- Set the environment variables
SESSION_SECRET_CURRENT
andSESSION_SECRET_PREVIOUS
in the.env
file. (These are used bycookie-session
.]
Install it and run:
npm install
npm run dev
# or
yarn
yarn dev
Deploy it to the cloud with Vercel (Documentation).
After deploying, copy the deployment URL and navigate to your Firebase project's Authentication tab. Scroll down in the page to "Authorized domains" and add that URL to the list.