-
Notifications
You must be signed in to change notification settings - Fork 290
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
c9a9449
commit 830f900
Showing
1 changed file
with
36 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,66 +1,69 @@ | ||
import { useEffect, useRef, useState } from 'react' | ||
import { onAuthStateChanged } from 'firebase/auth' | ||
import 'firebaseui/dist/firebaseui.css' | ||
import {auth} from "firebaseui" | ||
import { auth } from 'firebaseui' | ||
|
||
interface Props { | ||
// The Firebase UI Web UI Config object. | ||
// See: https://github.com/firebase/firebaseui-web#configuration | ||
uiConfig: auth.Config; | ||
uiConfig: auth.Config | ||
// Callback that will be passed the FirebaseUi instance before it is | ||
// started. This allows access to certain configuration options such as | ||
// disableAutoSignIn(). | ||
uiCallback?(ui: auth.AuthUI): void; | ||
uiCallback?(ui: auth.AuthUI): void | ||
// The Firebase App auth instance to use. | ||
firebaseAuth: any; // As firebaseui-web | ||
className?: string; | ||
firebaseAuth: any // As firebaseui-web | ||
className?: string | ||
} | ||
|
||
|
||
const StyledFirebaseAuth = ({uiConfig, firebaseAuth, className, uiCallback}: Props) => { | ||
const [firebaseui, setFirebaseui] = useState<typeof import('firebaseui') | null>(null); | ||
const [userSignedIn, setUserSignedIn] = useState(false); | ||
const elementRef = useRef(null); | ||
const StyledFirebaseAuth = ({ | ||
uiConfig, | ||
firebaseAuth, | ||
className, | ||
uiCallback, | ||
}: Props) => { | ||
const [firebaseui, setFirebaseui] = useState< | ||
typeof import('firebaseui') | null | ||
>(null) | ||
const [userSignedIn, setUserSignedIn] = useState(false) | ||
const elementRef = useRef(null) | ||
|
||
useEffect(() => { | ||
// Firebase UI only works on the Client. So we're loading the package only after | ||
// the component has mounted, so that this works when doing server-side rendering. | ||
setFirebaseui(require('firebaseui')); | ||
}, []); | ||
|
||
setFirebaseui(require('firebaseui')) | ||
Check failure on line 34 in example/components/StyledFirebaseAuth.tsx GitHub Actions / build
|
||
}, []) | ||
|
||
useEffect(() => { | ||
if (firebaseui === null ) | ||
return; | ||
if (firebaseui === null) return | ||
|
||
// Get or Create a firebaseUI instance. | ||
const firebaseUiWidget = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebaseAuth); | ||
if (uiConfig.signInFlow === 'popup') | ||
firebaseUiWidget.reset(); | ||
const firebaseUiWidget = | ||
firebaseui.auth.AuthUI.getInstance() || | ||
new firebaseui.auth.AuthUI(firebaseAuth) | ||
if (uiConfig.signInFlow === 'popup') firebaseUiWidget.reset() | ||
|
||
// We track the auth state to reset firebaseUi if the user signs out. | ||
const unregisterAuthObserver = onAuthStateChanged(firebaseAuth, user => { | ||
if (!user && userSignedIn) | ||
firebaseUiWidget.reset(); | ||
setUserSignedIn(!!user); | ||
}); | ||
const unregisterAuthObserver = onAuthStateChanged(firebaseAuth, (user) => { | ||
if (!user && userSignedIn) firebaseUiWidget.reset() | ||
setUserSignedIn(!!user) | ||
}) | ||
|
||
// Trigger the callback if any was set. | ||
if (uiCallback) | ||
uiCallback(firebaseUiWidget); | ||
if (uiCallback) uiCallback(firebaseUiWidget) | ||
|
||
// Render the firebaseUi Widget. | ||
// @ts-ignore | ||
Check failure on line 56 in example/components/StyledFirebaseAuth.tsx GitHub Actions / build
|
||
firebaseUiWidget.start(elementRef.current, uiConfig); | ||
firebaseUiWidget.start(elementRef.current, uiConfig) | ||
|
||
return () => { | ||
unregisterAuthObserver(); | ||
firebaseUiWidget.reset(); | ||
}; | ||
unregisterAuthObserver() | ||
firebaseUiWidget.reset() | ||
} | ||
// eslint-disable-next-line react-hooks/exhaustive-deps | ||
}, [firebaseui, uiConfig]); | ||
}, [firebaseui, uiConfig]) | ||
|
||
return <div className={className} ref={elementRef} />; | ||
}; | ||
return <div className={className} ref={elementRef} /> | ||
} | ||
|
||
export default StyledFirebaseAuth; | ||
export default StyledFirebaseAuth |