From 03e4d8ea8e9eda8c26e863366338da6d3c84b32e Mon Sep 17 00:00:00 2001 From: Yasuhisa Yoshida Date: Sun, 15 Jan 2023 02:16:41 +0900 Subject: [PATCH 1/2] =?UTF-8?q?react-firebaseui=E3=82=92=E8=87=AA=E5=89=8D?= =?UTF-8?q?=E3=81=A7=E7=AE=A1=E7=90=86=E3=81=99=E3=82=8B=E3=82=88=E3=81=86?= =?UTF-8?q?=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 124 ++++---------------- package.json | 2 +- src/components/SignInDialog/index.tsx | 2 +- src/components/StyledFirebaseAuth/index.tsx | 47 ++++++++ 4 files changed, 74 insertions(+), 101 deletions(-) create mode 100644 src/components/StyledFirebaseAuth/index.tsx diff --git a/package-lock.json b/package-lock.json index d3a8c16c..a08b6c1c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,10 +17,10 @@ "@types/node": "^18.11.18", "date-fns": "2.29.3", "firebase": "9.15.0", + "firebaseui": "^6.0.2", "react": "18.2.0", "react-copy-to-clipboard": "5.1.0", "react-dom": "18.2.0", - "react-firebaseui": "6.0.0", "react-scripts": "5.0.1", "typescript": "4.9.4", "web-vitals": "3.1.0" @@ -8865,21 +8865,6 @@ "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" } }, - "node_modules/autoprefixer/node_modules/caniuse-lite": { - "version": "1.0.30001332", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001332.tgz", - "integrity": "sha512-10T30NYOEQtN6C11YGg411yebhvpnC6Z102+B95eAsN0oB6KUs01ivE8u+G6FMIRtIrVlYXhL+LUwQ3/hXwDWw==", - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/browserslist" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/caniuse-lite" - } - ] - }, "node_modules/autoprefixer/node_modules/electron-to-chromium": { "version": "1.4.110", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.110.tgz", @@ -9464,13 +9449,19 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001289", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001289.tgz", - "integrity": "sha512-hV6x4IfrYViN8cJbGFVbjD7KCrhS/O7wfDgvevYRanJ/IN+hhxpTcXXqaxy3CzPNFe5rlqdimdEB/k7H0YzxHg==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/browserslist" - } + "version": "1.0.30001444", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001444.tgz", + "integrity": "sha512-ecER9xgJQVMqcrxThKptsW0pPxSae8R2RB87LNa+ivW9ppNWRHEplXcDzkCOP4LYWGj8hunXLqaiC41iBATNyg==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + } + ] }, "node_modules/case-sensitive-paths-webpack-plugin": { "version": "2.4.0", @@ -9860,21 +9851,6 @@ "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" } }, - "node_modules/core-js-compat/node_modules/caniuse-lite": { - "version": "1.0.30001332", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001332.tgz", - "integrity": "sha512-10T30NYOEQtN6C11YGg411yebhvpnC6Z102+B95eAsN0oB6KUs01ivE8u+G6FMIRtIrVlYXhL+LUwQ3/hXwDWw==", - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/browserslist" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/caniuse-lite" - } - ] - }, "node_modules/core-js-compat/node_modules/electron-to-chromium": { "version": "1.4.110", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.110.tgz", @@ -12346,9 +12322,9 @@ } }, "node_modules/firebaseui": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/firebaseui/-/firebaseui-6.0.0.tgz", - "integrity": "sha512-fhzteivWRTnOhSk5JkIVLmcXk6aVh4ZtW+KAnJijeeZhAyM+Ed9m1YgC4l+VK+NOp+kerVw6HL1mRdvDF6Yeuw==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/firebaseui/-/firebaseui-6.0.2.tgz", + "integrity": "sha512-Jwwn2I657loKrvedeCrwED9UibLFl8Cm0uH2ntDBSCpruWzG4HXlIWb35WsDdXMILRPQjJ1PwVwuRsrnsxcaXA==", "dependencies": { "dialog-polyfill": "^0.4.7", "material-design-lite": "^1.2.0" @@ -18185,7 +18161,7 @@ "node_modules/material-design-lite": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/material-design-lite/-/material-design-lite-1.3.0.tgz", - "integrity": "sha1-0ATOP+6Zoe63Sni4oyUTSl8RcdM=", + "integrity": "sha512-ao76b0bqSTKcEMt7Pui+J/S3eVF0b3GWfuKUwfe2lP5DKlLZOwBq37e0/bXEzxrw7/SuHAuYAdoCwY6mAYhrsg==", "engines": { "node": ">=0.12.0" } @@ -20045,21 +20021,6 @@ "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" } }, - "node_modules/postcss-preset-env/node_modules/caniuse-lite": { - "version": "1.0.30001332", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001332.tgz", - "integrity": "sha512-10T30NYOEQtN6C11YGg411yebhvpnC6Z102+B95eAsN0oB6KUs01ivE8u+G6FMIRtIrVlYXhL+LUwQ3/hXwDWw==", - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/browserslist" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/caniuse-lite" - } - ] - }, "node_modules/postcss-preset-env/node_modules/electron-to-chromium": { "version": "1.4.110", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.110.tgz", @@ -20754,18 +20715,6 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, - "node_modules/react-firebaseui": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/react-firebaseui/-/react-firebaseui-6.0.0.tgz", - "integrity": "sha512-VzLMiW7DBZCsW/qpP9nky/pPlAoIjDxA2Qyc+QAPf+RjelIkvPPiCBXR2aAz+Upy+ujrx6pYDXj547DW5uC4ww==", - "dependencies": { - "firebaseui": "^6.0.0" - }, - "peerDependencies": { - "firebase": "^9.1.3", - "react": ">=15 <=17" - } - }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -30149,11 +30098,6 @@ "picocolors": "^1.0.0" } }, - "caniuse-lite": { - "version": "1.0.30001332", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001332.tgz", - "integrity": "sha512-10T30NYOEQtN6C11YGg411yebhvpnC6Z102+B95eAsN0oB6KUs01ivE8u+G6FMIRtIrVlYXhL+LUwQ3/hXwDWw==" - }, "electron-to-chromium": { "version": "1.4.110", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.110.tgz", @@ -30614,9 +30558,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001289", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001289.tgz", - "integrity": "sha512-hV6x4IfrYViN8cJbGFVbjD7KCrhS/O7wfDgvevYRanJ/IN+hhxpTcXXqaxy3CzPNFe5rlqdimdEB/k7H0YzxHg==" + "version": "1.0.30001444", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001444.tgz", + "integrity": "sha512-ecER9xgJQVMqcrxThKptsW0pPxSae8R2RB87LNa+ivW9ppNWRHEplXcDzkCOP4LYWGj8hunXLqaiC41iBATNyg==" }, "case-sensitive-paths-webpack-plugin": { "version": "2.4.0", @@ -30903,11 +30847,6 @@ "picocolors": "^1.0.0" } }, - "caniuse-lite": { - "version": "1.0.30001332", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001332.tgz", - "integrity": "sha512-10T30NYOEQtN6C11YGg411yebhvpnC6Z102+B95eAsN0oB6KUs01ivE8u+G6FMIRtIrVlYXhL+LUwQ3/hXwDWw==" - }, "electron-to-chromium": { "version": "1.4.110", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.110.tgz", @@ -32716,9 +32655,9 @@ } }, "firebaseui": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/firebaseui/-/firebaseui-6.0.0.tgz", - "integrity": "sha512-fhzteivWRTnOhSk5JkIVLmcXk6aVh4ZtW+KAnJijeeZhAyM+Ed9m1YgC4l+VK+NOp+kerVw6HL1mRdvDF6Yeuw==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/firebaseui/-/firebaseui-6.0.2.tgz", + "integrity": "sha512-Jwwn2I657loKrvedeCrwED9UibLFl8Cm0uH2ntDBSCpruWzG4HXlIWb35WsDdXMILRPQjJ1PwVwuRsrnsxcaXA==", "requires": { "dialog-polyfill": "^0.4.7", "material-design-lite": "^1.2.0" @@ -37014,7 +36953,7 @@ "material-design-lite": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/material-design-lite/-/material-design-lite-1.3.0.tgz", - "integrity": "sha1-0ATOP+6Zoe63Sni4oyUTSl8RcdM=" + "integrity": "sha512-ao76b0bqSTKcEMt7Pui+J/S3eVF0b3GWfuKUwfe2lP5DKlLZOwBq37e0/bXEzxrw7/SuHAuYAdoCwY6mAYhrsg==" }, "mdn-data": { "version": "2.0.4", @@ -38211,11 +38150,6 @@ "picocolors": "^1.0.0" } }, - "caniuse-lite": { - "version": "1.0.30001332", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001332.tgz", - "integrity": "sha512-10T30NYOEQtN6C11YGg411yebhvpnC6Z102+B95eAsN0oB6KUs01ivE8u+G6FMIRtIrVlYXhL+LUwQ3/hXwDWw==" - }, "electron-to-chromium": { "version": "1.4.110", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.110.tgz", @@ -38717,14 +38651,6 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, - "react-firebaseui": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/react-firebaseui/-/react-firebaseui-6.0.0.tgz", - "integrity": "sha512-VzLMiW7DBZCsW/qpP9nky/pPlAoIjDxA2Qyc+QAPf+RjelIkvPPiCBXR2aAz+Upy+ujrx6pYDXj547DW5uC4ww==", - "requires": { - "firebaseui": "^6.0.0" - } - }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 97a069c8..333872b0 100644 --- a/package.json +++ b/package.json @@ -12,10 +12,10 @@ "@types/node": "^18.11.18", "date-fns": "2.29.3", "firebase": "9.15.0", + "firebaseui": "^6.0.2", "react": "18.2.0", "react-copy-to-clipboard": "5.1.0", "react-dom": "18.2.0", - "react-firebaseui": "6.0.0", "react-scripts": "5.0.1", "typescript": "4.9.4", "web-vitals": "3.1.0" diff --git a/src/components/SignInDialog/index.tsx b/src/components/SignInDialog/index.tsx index 22400b05..5b37684e 100644 --- a/src/components/SignInDialog/index.tsx +++ b/src/components/SignInDialog/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Auth, GoogleAuthProvider } from 'firebase/auth'; -import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth'; +import StyledFirebaseAuth from '../StyledFirebaseAuth'; export type SignInDialogProps = { firebaseAuth: Auth | null; diff --git a/src/components/StyledFirebaseAuth/index.tsx b/src/components/StyledFirebaseAuth/index.tsx new file mode 100644 index 00000000..b14f35f1 --- /dev/null +++ b/src/components/StyledFirebaseAuth/index.tsx @@ -0,0 +1,47 @@ +// ref: https://github.com/firebase/firebaseui-web-react/pull/173#issuecomment-1151532176 +import React, { useEffect, useRef, useState } from 'react'; +import { onAuthStateChanged } from 'firebase/auth'; +import * as firebaseui from 'firebaseui'; +import 'firebaseui/dist/firebaseui.css'; + +type Props = { + // The Firebase UI Web UI Config object. + // See: https://github.com/firebase/firebaseui-web#configuration + uiConfig: firebaseui.auth.Config; + firebaseAuth: any; // As firebaseui-web +} + +const StyledFirebaseAuth = (props: Props) => { + const [userSignedIn, setUserSignedIn] = useState(false); + const elementRef = useRef(null); + + useEffect(() => { + // Get or Create a firebaseUI instance. + const firebaseUiWidget = firebaseui.auth.AuthUI.getInstance() + || new firebaseui.auth.AuthUI(props.firebaseAuth); + if (props.uiConfig.signInFlow === 'popup') { + firebaseUiWidget.reset(); + } + + // We track the auth state to reset firebaseUi if the user signs out. + const unregisterAuthObserver = onAuthStateChanged(props.firebaseAuth, (user) => { + if (!user && userSignedIn) { + firebaseUiWidget.reset(); + } + setUserSignedIn(!!user); + }); + + // Render the firebaseUi Widget. + // @ts-ignore + firebaseUiWidget.start(elementRef.current, props.uiConfig); + + return () => { + unregisterAuthObserver(); + firebaseUiWidget.reset(); + }; + }, [firebaseui, props.uiConfig]); + + return
; +}; + +export default StyledFirebaseAuth; \ No newline at end of file From b9cddab19cb5b280fa98ca3db6e7fa9c362d957a Mon Sep 17 00:00:00 2001 From: Yasuhisa Yoshida Date: Sun, 15 Jan 2023 02:29:47 +0900 Subject: [PATCH 2/2] =?UTF-8?q?mock=E3=82=82=E5=AF=BE=E5=BF=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Body/index.spec.tsx | 2 +- src/components/StyledFirebaseAuth/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Body/index.spec.tsx b/src/components/Body/index.spec.tsx index b0fd5763..708634eb 100644 --- a/src/components/Body/index.spec.tsx +++ b/src/components/Body/index.spec.tsx @@ -11,7 +11,7 @@ jest.mock("firebase/auth", () => ({ GoogleAuthProvider: jest.fn(), })); const mockecdGetAuth = getAuth; -jest.mock('react-firebaseui/StyledFirebaseAuth'); +jest.mock('../StyledFirebaseAuth', () => jest.fn()); describe('Bodyが正しく表示される', () => { it('firebaseの認証が表示されていない状態', () => { diff --git a/src/components/StyledFirebaseAuth/index.tsx b/src/components/StyledFirebaseAuth/index.tsx index b14f35f1..7701de5a 100644 --- a/src/components/StyledFirebaseAuth/index.tsx +++ b/src/components/StyledFirebaseAuth/index.tsx @@ -44,4 +44,4 @@ const StyledFirebaseAuth = (props: Props) => { return
; }; -export default StyledFirebaseAuth; \ No newline at end of file +export default StyledFirebaseAuth;