firebase-affinidi-login-reference-app

README.md

@@ -16,6 +16,11 @@ This repository contains multiple sample applications to get you started on inte
 
   Uses [NextJS](https://nextjs.org/docs) and [NextAuthJS](https://next-auth.js.org/getting-started/introduction) with the [Auth0 provider](https://next-auth.js.org/providers/auth0).
 
+### Integrating Affinidi Login through Firebase
+
+- [firebase-nextjs-nextauthjs](./samples/firebase-nextjs-nextauthjs)
+
+  Uses [NextJS](https://nextjs.org/docs) and [NextAuthJS](https://next-auth.js.org/getting-started/introduction) with the [Firebase provider](https://firebase.google.com/docs/auth/web/custom-auth).
 ## Read More
 
 Explore our [documentation](https://docs.affinidi.com/docs/) and [labs](https://docs.affinidi.com/labs/) to learn more about integrating Affinidi Login and Affinidi Vault.

package.json

@@ -10,14 +10,17 @@
     "install:template": "npm i --prefix generator/template",
     "install:affinidi-nextjs-nextauthjs": "npm i --prefix samples/affinidi-nextjs-nextauthjs",
     "install:auth0-nextjs-nextauthjs": "npm i --prefix samples/auth0-nextjs-nextauthjs",
+    "install:firebase-nextjs-nextauthjs": "npm i --prefix samples/firebase-nextjs-nextauthjs",
     "start": "concurrently -n w: \"npm:start:*(!template)\"",
     "start:template": "npm run --prefix generator/template dev -- -p 3000",
     "start:affinidi-nextjs-nextauthjs": "npm run --prefix samples/affinidi-nextjs-nextauthjs dev -- -p 3001",
     "start:auth0-nextjs-nextauthjs": "npm run --prefix samples/auth0-nextjs-nextauthjs dev -- -p 3002",
+    "start:firebase-nextjs-nextauthjs": "npm run --prefix samples/firebase-nextjs-nextauthjs dev -- -p 3003",
     "build": "concurrently -n w: \"npm:build:*(!template)\"",
     "build:template": "npm run --prefix generator/template build",
     "build:affinidi-nextjs-nextauthjs": "npm run --prefix samples/affinidi-nextjs-nextauthjs build",
     "build:auth0-nextjs-nextauthjs": "npm run --prefix samples/auth0-nextjs-nextauthjs build",
+    "build:firebase-nextjs-nextauthjs": "npm run --prefix samples/firebase-nextjs-nextauthjs build",
     "postinstall": "npm run install-all"
   },
   "repository": {

samples/firebase-nextjs-nextauthjs/.env.example

@@ -0,0 +1,14 @@
+# frontend-only envs
+NEXT_PUBLIC_HOST="http://localhost:3000"
+NEXT_PUBLIC_HIDE_DATA_SHARING_BANNER="false"
+NEXT_PUBLIC_SHOW_CONNECTOR_SELECTION="false"
+
+# backend-only envs
+LOG_LEVEL="debug"
+
+NEXTAUTH_URL="http://localhost:3000"
+AUTH_JWT_SECRET="this-is-very-secret-dont-tell-anyone"
+
+PROVIDER_CLIENT_ID=""
+PROVIDER_CLIENT_SECRET=""
+PROVIDER_ISSUER=""

samples/firebase-nextjs-nextauthjs/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

samples/firebase-nextjs-nextauthjs/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# next.js
+.next/
+out/
+
+# production
+build
+
+# misc
+.DS_Store
+*.pem
+.idea
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.env
+.vscode
+

samples/firebase-nextjs-nextauthjs/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright © 2023 Affinidi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy 
+of this software and associated documentation files (the “Software”), 
+to deal in the Software without restriction, including without limitation 
+the rights to use, copy, modify, merge, publish, distribute, sublicense, 
+and/or sell copies of the Software, and to permit persons to whom the Software 
+is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included 
+in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
+PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

samples/firebase-nextjs-nextauthjs/README.md

@@ -0,0 +1,33 @@
+# Affinidi Vault & Chrome Extension – an Affinidi reference app
+
+This is a sample reference app that showcases how to use Affinidi Vault to perform authentication. It enables a passwordless experience for the end-users through Affinidi Vault Chrome Extension using the [OpenID for Verifiable Presentations specification.](https://openid.net/specs/openid-4-verifiable-presentations-1_0.html)
+
+> This is a sample code only to quickly explore and learn how to integrate Affinidi Login into your own application. 
+
+***Important: This is not a Production-ready implementation. Do not deploy this to production and use this only as a guide.***
+
+## Before you begin
+
+1. This reference application is built using [NextJS](https://nextjs.org/) and [NextAuth.js](https://next-auth.js.org/)
+
+2. You need to have [NodeJS](https://nodejs.org/en) installed on your machine to install the dependencies and run the application.
+
+## Running the app
+
+Setting up the reference app is easy, just follow these steps:  
+
+1. Install the dependencies:
+    ```
+    $ npm install
+    ```
+2. Create a `.env` file:
+    ```
+    $ cp .env.example .env
+    ```
+
+3. Launch the app:
+    ```
+    $ npm run dev
+    ```
+
+    App will be available locally on http://localhost:3000.

samples/firebase-nextjs-nextauthjs/components/Box/Box.styled.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+
+import { pxToRem } from 'utils'
+
+type StyledProps = {
+  $wrap: React.CSSProperties['flexWrap']
+  $direction: React.CSSProperties['flexDirection']
+  $justifyContent: React.CSSProperties['justifyContent']
+  $alignItems: React.CSSProperties['alignItems']
+  $flex: number
+  $gap: number
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export const Box = styled.div<StyledProps>`
+  display: flex;
+  flex-wrap: ${(props) => props.$wrap};
+  align-items: ${(props) => props.$alignItems};
+  flex-direction: ${(props) => props.$direction};
+  justify-content: ${(props) => props.$justifyContent};
+
+  ${(props) =>
+    !!props.$flex &&
+    css`
+      flex: ${props.$flex};
+    `}
+
+  ${(props) =>
+    !!props.$gap &&
+    css`
+      gap: ${pxToRem(props.$gap)};
+    `}
+`

samples/firebase-nextjs-nextauthjs/components/Box/Box.tsx

@@ -0,0 +1,35 @@
+import React, { HTMLAttributes } from 'react'
+
+import * as S from './Box.styled'
+
+export interface BoxProps extends HTMLAttributes<HTMLDivElement> {
+  wrap?: React.CSSProperties['flexWrap']
+  direction?: React.CSSProperties['flexDirection']
+  justifyContent?: React.CSSProperties['justifyContent']
+  alignItems?: React.CSSProperties['alignItems']
+  flex?: number
+  gap?: number
+  children: React.ReactNode
+}
+
+const Box: React.FC<BoxProps> = ({
+  wrap = 'nowrap',
+  direction = 'column',
+  justifyContent = 'flex-start',
+  alignItems = 'normal',
+  gap = 0,
+  flex = 0,
+  ...props
+}) => (
+  <S.Box
+    $wrap={wrap}
+    $direction={direction}
+    $justifyContent={justifyContent}
+    $alignItems={alignItems}
+    $gap={gap}
+    $flex={flex}
+    {...props}
+  />
+)
+
+export default Box

samples/firebase-nextjs-nextauthjs/components/ErrorModal/ErrorModal.styled.tsx

@@ -0,0 +1,44 @@
+import { Modal as ReactModal } from 'react-responsive-modal'
+import "react-responsive-modal/styles.css";
+import styled from 'styled-components'
+
+import { pxToRem } from 'utils'
+
+export const Modal = styled(({ classNames, ...rest }) => (
+  <ReactModal {...rest} classNames={{ ...classNames}}/>
+))`
+  .modal {
+    background: red;
+    color: red;
+  }
+
+  .react-responsive-modal-container {
+    background: red;
+  }
+
+  .react-responsive-modal-modal {
+    background: red;
+    color: #6a6a6a;
+  }
+`
+
+export const ModalWrapper = styled.div`
+  margin: ${pxToRem(48)};
+  width: ${pxToRem(370)};
+`
+
+export const Title = styled.div`
+  margin: ${pxToRem(16)} ${pxToRem(12)} ${pxToRem(32)} 0;
+  font-family: 'lora';
+  font-size: ${pxToRem(52)};
+  font-weight: bold;
+  color: #10375c;
+`
+
+export const SubTitle = styled.div`
+  margin: ${pxToRem(32)} ${pxToRem(16)} ${pxToRem(24)} 0;;
+  font-family: 'lato';
+  font-size: ${pxToRem(20)};
+  line-height: 1.5;
+  color: #6a6a6a;
+`

samples/firebase-nextjs-nextauthjs/components/ErrorModal/ErrorModal.tsx

@@ -0,0 +1,35 @@
+import { FC, useState } from "react";
+import "react-responsive-modal/styles.css";
+
+import { hostUrl } from "utils/env_public";
+
+import * as S from "./ErrorModal.styled";
+
+type ModalProps = {
+  error: string
+  errorDescription?: string
+};
+
+const ErrorModal: FC<ModalProps> = ({ error, errorDescription }) => {
+  const [open, setOpen] = useState(true);
+
+  async function onCloseModal() {
+    setOpen(false);
+    window.location.href = hostUrl;
+  }
+
+  return <S.Modal open={open} onClose={onCloseModal} center>
+    <S.ModalWrapper>
+      <S.Title>Whoops!</S.Title>
+      <S.SubTitle>
+        Something went wrong, please try again.
+        <br/>
+        <br/>
+        Reason: {error}
+        {errorDescription ? <><br />{errorDescription}</> : ''}
+      </S.SubTitle>
+    </S.ModalWrapper>
+  </S.Modal>
+};
+
+export default ErrorModal;