Gladly team main

.github/ISSUE_TEMPLATE/bug_report.md

@@ -8,10 +8,13 @@ assignees: ''
 ---
 
 **Describe the bug**
-A clear and concise description of what the bug is.
+A clear and concise description of the bug.
 
-**Version**
-What version of `next-firebase-auth` are you using?
+**Versions**
+
+`next-firebase-auth` version: 
+Firebase JS SDK: 
+Next.js: 
 
 **To Reproduce**
 Steps to reproduce the behavior:

.github/workflows/npm-publish.yml

@@ -16,6 +16,17 @@ jobs:
       - run: yarn install
       - run: yarn test
       - run: yarn run build
-      - run: npm publish
+      - run: echo ${{github.ref}}
+      - name: Release canary version
+        # The ref will be the tag name. Match against tags like
+        # "v1.0.0-canary.0".
+        if: ${{ contains(github.ref, '-canary.') }}
+        run: npm publish --tag canary
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+      - name: Release latest version
+        # Assume non-canary is latest.
+        if: ${{ !contains(github.ref, '-canary.') }}
+        run: npm publish
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.prettierrc.json

@@ -1,6 +1,5 @@
 {
   "bracketSpacing": true,
-  "jsxBracketSameLine": false,
   "useTabs": false,
   "semi": false,
   "singleQuote": true,

CODE_OF_CONDUCT.md

@@ -0,0 +1,40 @@
+
+# Contributor Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, caste, color, religion, or sexual identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others’ private information, such as a physical or email address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant, version 2.1](https://www.contributor-covenant.org/version/2/1/code_of_conduct/).

CONTRIBUTING.md

@@ -0,0 +1,55 @@
+# Contributing
+
+Welcome, and thanks for considering contributing to `next-firebase-auth`! We really appreciate your support.
+
+Here are some quick guidelines on how to contribute productively.
+
+### Open issues before working
+
+Before working on a new feature or bug fix, please open a detailed issue for discussion. This helps prevent wasted time (for example, if the feature is out of scope of this package) and gives other community members a chance for input.
+
+If you'll start work on an existing issue, please comment that you're working on it so other contributors don't duplicate efforts.
+
+### Use issue templates
+
+Please use the issue templates. Issues outside of the template guidelines may be closed.
+
+Use discussions for Q&A and for help on your app's specific implementation.
+
+If reporting a bug, especially a full-stack one (such as problems with cookies), please provide a full example or clear way to reproduce it.
+
+### Security disclosures
+
+If you find a security vulnerability, do **not** open an issue. Please email the maintainers at [[email protected]](mailto:[email protected]).
+
+### Making code contributions
+
+1. Before coding, please open a related issue (or comment on an existing issue to let us know you're working on it)
+2. Fork this repository
+3. Make code changes in your fork
+    * Add comments where it's potentially unclear what your code is doing
+    * Commit with descriptive messages
+    * Ensure complete code coverage for your changes
+    * Make sure all linting and tests succeed (`yarn run test`)
+4. Open a pull request pointing to the `main` branch in this repository
+    * Add a clear title
+    * In the description, link to the related issue, such as: `Closes #123.`
+
+### Developing with a local version of the package
+
+While developing, it can be helpful to use a local version of `next-firebase-auth` in another app. To do so:
+
+1. Install [yalc](https://www.npmjs.com/package/yalc): `yarn global add yalc`
+2. In `next-firebase-auth`, publish a local version: `yarn run dev:publish` -- this builds your local package code, then publishes it with Yalc
+3. In another local Next.js app, such as the example app in this repository: `yalc add next-firebase-auth`
+4. After you make changes to your local `next-firebase-auth`, use `yarn run dev:publish` again to use the latest local code in your app
+
+### We may be slow to respond
+
+At the moment, this repository is maintained by ~1 person in their spare time. We will be as responsive as possible, but we may be slow to respond to issues and PRs. Thanks for your patience!
+
+### Be a good community member
+
+Please respect our [Code of Conduct](./CODE_OF_CONDUCT.md) and contribute to a positive, constructive open source environment.
+
+We strive to support first-time contributors and beginners through guidance and constructive feedback.

README.md

@@ -1,11 +1,12 @@
 [![Build Status](https://img.shields.io/github/workflow/status/gladly-team/next-firebase-auth/Unit%20test,%20log%20code%20coverage,%20and%20build)](https://github.com/gladly-team/next-firebase-auth/actions?query=workflow%3A%22Unit+test%2C+log+code+coverage%2C+and+build%22)
 [![codecov](https://codecov.io/gh/gladly-team/next-firebase-auth/branch/main/graph/badge.svg)](https://codecov.io/gh/gladly-team/next-firebase-auth)
 [![npm](https://img.shields.io/npm/v/next-firebase-auth.svg)](https://www.npmjs.com/package/next-firebase-auth)
+[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](./CODE_OF_CONDUCT.md)
 
 # next-firebase-auth
 Simple Firebase authentication for all Next.js rendering strategies.
 
-#### [Demo](#demo) • [Alternatives](#when-not-to-use-this-package) • [Getting Started](#get-started) • [API](#api) • [Config](#config) • [Types](#types) • [Examples](#examples) • [Troubleshooting](#troubleshooting)
+#### [Demo](#demo) • [Alternatives](#when-not-to-use-this-package) • [Getting Started](#get-started) • [API](#api) • [Config](#config) • [Types](#types) • [Examples](#examples) • [Troubleshooting](#troubleshooting) • [Contributing](./CONTRIBUTING.md)
 
 ## What It Does
 This package makes it simple to get the authenticated Firebase user and ID token during both client-side and server-side rendering (SSR).
@@ -49,6 +50,8 @@ Install:
 
 `yarn add next-firebase-auth`
 
+> ⚠️ If you're using v9 of the Firebase JS SDK, use `next-firebase-auth@canary`. This is an unstable v1 prerelease. Track progress on v1 [in this issue](https://github.com/gladly-team/next-firebase-auth/issues/265).
+
 Make sure peer dependencies are also installed:
 
 `yarn add firebase firebase-admin next react react-dom`
@@ -221,8 +224,8 @@ Option | Description | Default
 `whenAuthed` | The action to take if the user is authenticated. One of `AuthAction.RENDER` or `AuthAction.REDIRECT_TO_APP`. | `AuthAction.RENDER`
 `whenUnauthedBeforeInit` | The action to take if the user is *not* authenticated but the Firebase client JS SDK has not yet initialized. One of: `AuthAction.RENDER`, `AuthAction.REDIRECT_TO_LOGIN`, `AuthAction.SHOW_LOADER`. | `AuthAction.RENDER`
 `whenUnauthedAfterInit` | The action to take if the user is *not* authenticated and the Firebase client JS SDK has already initialized. One of: `AuthAction.RENDER`, `AuthAction.REDIRECT_TO_LOGIN`. | `AuthAction.RENDER`
-`appPageURL` | The redirect destination URL when we should redirect to the app. | `config.appPageURL`
-`authPageURL` | The redirect destination URL when we should redirect to the login page. | `config.authPageURL`
+`appPageURL` | The redirect destination URL when we should redirect to the app. Can be a string or a function that receives `{ ctx }` and returns a URL. | `config.appPageURL`
+`authPageURL` | The redirect destination URL when we should redirect to the login page. Can be a string or a function that receives `{ ctx }` and returns a URL. | `config.authPageURL`
 `LoaderComponent` | The component to render when the user is unauthed and `whenUnauthedBeforeInit` is set to `AuthAction.SHOW_LOADER`. | null
 
 For example, this page will redirect to the login page if the user is not authenticated:
@@ -253,6 +256,8 @@ export default withAuthUser({
 })(LoginPage)
 ```
 
+For TypeScript usage, take a look [here](#typescript).
+
 #### `withAuthUserTokenSSR({ ...options })(getServerSidePropsFunc = ({ AuthUser }) => {})`
 
 A higher-order function that wraps a Next.js pages's `getServerSideProps` function to provide the `AuthUser` context during server-side rendering. Optionally, it can server-side redirect based on the user's auth status. A wrapped function is optional; if provided, it will be called with a `context` object that contains an [`AuthUser`](#authuser) property.
@@ -263,8 +268,8 @@ Option | Description | Default
 ------------ | ------------- | -------------
 `whenAuthed` | The action to take if the user is authenticated. Either `AuthAction.RENDER` or `AuthAction.REDIRECT_TO_APP`. | `AuthAction.RENDER`
 `whenUnauthed` | The action to take if the user is *not* authenticated. Either `AuthAction.RENDER` or `AuthAction.REDIRECT_TO_LOGIN`. | `AuthAction.RENDER`
-`appPageURL` | The redirect destination URL when we should redirect to the app. | `config.appPageURL`
-`authPageURL` | The redirect destination URL when we should redirect to the login page. | `config.authPageURL`
+`appPageURL` | The redirect destination URL when we should redirect to the app. Can be a string or a function that receives `{ ctx }` and returns a URL. | `config.appPageURL`
+`authPageURL` | The redirect destination URL when we should redirect to the login page. Can be a string or a function that receives `{ ctx }` and returns a URL. | `config.authPageURL`
 
 
 For example, this page will SSR for authenticated users, fetching props using their Firebase ID token, and will server-side redirect to the login page if the user is not authenticated:
@@ -394,9 +399,9 @@ export default withAuthUser()(Artist)
 
 See an [example config here](#example-config). Provide the config when you call `init`.
 
-**authPageURL**: The default URL to navigate to when `withAuthUser` or `withAuthUserTokenSSR` need to redirect to login. Optional unless using the `AuthAction.REDIRECT_TO_LOGIN` auth action.
+**authPageURL**: The default URL to navigate to when `withAuthUser` or `withAuthUserTokenSSR` need to redirect to login. Can be a string or a function that receives `{ ctx }` and returns a URL. Optional unless using the `AuthAction.REDIRECT_TO_LOGIN` auth action.
 
-**appPageURL**: The default URL to navigate to when `withAuthUser` or `withAuthUserTokenSSR` need to redirect to the app. Optional unless using the `AuthAction.REDIRECT_TO_APP` auth action.
+**appPageURL**: The default URL to navigate to when `withAuthUser` or `withAuthUserTokenSSR` need to redirect to the app. Can be a string or a function that receives `{ ctx }` and returns a URL. Optional unless using the `AuthAction.REDIRECT_TO_APP` auth action.
 
 **loginAPIEndpoint**: The API endpoint this module will call when the auth state changes for an authenticated Firebase user. Must be set unless `tokenChangedHandler` is set.
 
@@ -527,6 +532,10 @@ The user from the Firebase JS SDK, if it has initialized. Otherwise, null.
 A method that calls Firebase's [`signOut`](https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signout) if the Firebase JS SDK has initialized. If the SDK has not initialized, this method is a noop.
 
 ## Examples
+* [Using the Firebase Apps](#using-the-firebase-apps)
+* [TypeScript](#typescript)
+* [Dynamic Redirects](#dynamic-redirects)
+* [Testing and Mocking with Jest](#testing-and-mocking-with-jest)
 
 ### Using the Firebase Apps
 
@@ -565,6 +574,104 @@ const Artists = () => {
 }
 ```
 
+
+### TypeScript
+
+When using `withAuthUser` with TypeScript, use [TypeScript Generics](https://www.typescriptlang.org/docs/handbook/2/generics.html). For example:
+
+```TypeScript
+// /pages/demo.tsx
+import { VFC } from 'react'
+import { Loading } from 'components/Loading/Loading'
+import { AuthAction, withAuthUser } from 'next-firebase-auth'
+
+type DemoDataType = {
+  name: string
+}
+
+const Demo: VFC<DemoDataType> = ({ name }) => {
+  return <div>Hello {name}!</div>
+}
+
+export default withAuthUser<DemoDataType>({ // <--- Ensure that the type is provided
+  whenUnauthedBeforeInit: AuthAction.SHOW_LOADER,
+  whenUnauthedAfterInit: AuthAction.REDIRECT_TO_LOGIN,
+  LoaderComponent: Loading,
+})(Demo)
+```
+
+For a full example with server-side data fetching, see the [TypeScript demo page](https://github.com/gladly-team/next-firebase-auth/blob/main/example/pages/ssr-no-token.tsx) in the example app.
+
+### Dynamic Redirects
+
+This package makes it easy to redirect to a login page or app page depending on whether a user is logged in. The destination URLs can also be dynamic: the `authPageURL` and `appPageURL` properties, used in the config and higher-order components, can be functions that receive `{ ctx }` and return a URL.
+
+The [example app](https://github.com/gladly-team/next-firebase-auth/tree/main/example) uses this to set a post-login destination URL:
+
+```js
+// ./utils/initAuth.js
+import { init } from 'next-firebase-auth'
+import absoluteUrl from 'next-absolute-url'
+
+const initAuth = () => init({
+  // This demonstrates setting a dynamic destination URL when
+  // redirecting from app pages. Alternatively, you can simply
+  // specify `authPageURL: '/auth-ssr'`.
+  authPageURL: ({ ctx }) => {
+    const isServerSide = typeof window === 'undefined'
+    const origin = isServerSide
+      ? absoluteUrl(ctx.req).origin
+      : window.location.origin
+    const destPath =
+      typeof window === 'undefined' ? ctx.resolvedUrl : window.location.href
+    const destURL = new URL(destPath, origin)
+    return `auth-ssr?destination=${encodeURIComponent(destURL)}`
+  },
+
+  // This demonstrates setting a dynamic destination URL when
+  // redirecting from auth pages. Alternatively, you can simply
+  // specify `appPageURL: '/'`.
+  appPageURL: ({ ctx }) => {
+    const isServerSide = typeof window === 'undefined'
+    const origin = isServerSide
+      ? absoluteUrl(ctx.req).origin
+      : window.location.origin
+    const params = isServerSide
+      ? new URL(ctx.req.url, origin).searchParams
+      : new URLSearchParams(window.location.search)
+    const destinationParamVal = params.get('destination')
+      ? decodeURIComponent(params.get('destination'))
+      : undefined
+
+    // By default, go to the index page if the destination URL
+    // is invalid or unspecified.
+    let destURL = '/'
+    if (destinationParamVal) {
+      // Verify the redirect URL host is allowed.
+      // https://owasp.org/www-project-web-security-testing-guide/v41/4-Web_Application_Security_Testing/11-Client_Side_Testing/04-Testing_for_Client_Side_URL_Redirect
+      const allowedHosts = ['localhost:3000', 'nfa-example.vercel.app']
+      const allowed =
+        allowedHosts.indexOf(new URL(destinationParamVal).host) > -1
+      if (allowed) {
+        destURL = destinationParamVal
+      } else {
+        // eslint-disable-next-line no-console
+        console.warn(
+          `Redirect destination host must be one of ${allowedHosts.join(
+            ', '
+          )}.`
+        )
+      }
+    }
+    return destURL
+  },
+
+  // ... other config
+}
+
+export default initAuth
+```
+
 ### Testing and Mocking with Jest
 
 In order to test components wrapped with functions from `next-firebase-auth`, you will likely want to mock the `next-firebase-auth` library. This can be achieved using the [manual mocks feature of Jest](https://jestjs.io/docs/manual-mocks#mocking-node-modules).
@@ -795,15 +902,6 @@ We expect some apps will need some features that are not currently available:
 
 We'd love to hear your feedback on these or other features. Please feel free to [open a discussion](https://github.com/gladly-team/next-firebase-auth/discussions)!
 
-## Developing / Contributing
-
-We welcome contributions! Please feel free to jump into any open issues.
-
-### Using a local version of the package
-
-It can be helpful to use an in-development version of `next-firebase-auth` in another app:
+## Contributing
 
-1. Install [yalc](https://www.npmjs.com/package/yalc): `yarn global add yalc`
-2. In `next-firebase-auth`, publish a local version: `yarn run dev:publish` -- this builds your local package code, then publishes it with Yalc
-3. In another local Next.js app: `yalc add next-firebase-auth`
-4. After you make changes to your local `next-firebase-auth`, use `yarn run dev:publish` again to use the latest local code in your app
+We welcome contributions! Please see [contributing docs](./CONTRIBUTING.md) to get started.

example/components/DemoPageLinks.js

@@ -29,9 +29,6 @@ const DemoPageLinks = () => (
       <Link href="/ssr-no-token">
         <a style={styles.linkAnchor}>Example: SSR + no ID token</a>
       </Link>
-      <Link href="/ssr-custom-routing">
-        <a style={styles.linkAnchor}>Example: SSR + custom routing</a>
-      </Link>
       <Link href="/static-auth-required-loader">
         <a style={styles.linkAnchor}>
           Example: static + loader + data fetching with ID token

example/components/FirebaseAuth.js

@@ -22,8 +22,8 @@ const firebaseAuthConfig = {
   callbacks: {
     // https://github.com/firebase/firebaseui-web#signinsuccesswithauthresultauthresult-redirecturl
     signInSuccessWithAuthResult: () =>
-      // Don't automatically redirect. We handle redirecting based on
-      // auth state in withAuthComponent.js.
+      // Don't automatically redirect. We handle redirects using
+      // `next-firebase-auth`.
       false,
   },
 }

example/components/Header.js

@@ -1,10 +1,11 @@
 import React from 'react'
 import Link from 'next/link'
 
-const nfaDependencyVersion = require('../package.json').dependencies[
-  'next-firebase-auth'
-]
+const nfaDependencyVersion =
+  require('../package.json').dependencies['next-firebase-auth']
 const nextDependencyVersion = require('../package.json').dependencies.next
+const firebaseDependencyVersion =
+  require('../package.json').dependencies.firebase
 
 const styles = {
   container: {
@@ -28,6 +29,7 @@ const Header = ({ email, signOut }) => (
     <div style={styles.versionsContainer}>
       <div>v{nfaDependencyVersion}</div>
       <div>Next.js v{nextDependencyVersion}</div>
+      <div>Firebase v{firebaseDependencyVersion}</div>
     </div>
     {email ? (
       <>