Last active
February 8, 2023 23:21
-
-
Save nicolasmontielf/13a050270e6465a757dda05aeae0656f to your computer and use it in GitHub Desktop.
Login page for a React project, implementing FirebaseUI for authentication
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
// FirebaseUI | |
import firebase from 'firebase/compat/app'; | |
import * as firebaseui from 'firebaseui' | |
import 'firebaseui/dist/firebaseui.css' | |
// React stuff | |
import { useEffect } from 'react'; | |
import { useNavigate } from "react-router-dom"; | |
// Auth service | |
import auth from '../services/auth' | |
export default () => { | |
useEffect(() => { | |
const ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(auth); | |
ui.start('#firebaseui-auth-container', { | |
callbacks: { | |
signInSuccessWithAuthResult: function(authResult, redirectUrl) { | |
// Action if the user is authenticated successfully | |
}, | |
uiShown: function() { | |
// This is what should happen when the form is full loaded. In this example, I hide the loader element. | |
document.getElementById('loader')!.style.display = 'none'; | |
} | |
}, | |
signInSuccessUrl: 'https://www.anyurl.com', // This is where should redirect if the sign in is successful. | |
signInOptions: [ // This array contains all the ways an user can authenticate in your application. For this example, is only by email. | |
{ | |
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID, | |
requireDisplayName: true, | |
disableSignUp: { | |
status: true | |
} | |
} | |
], | |
tosUrl: 'https://www.example.com/terms-conditions', // URL to you terms and conditions. | |
privacyPolicyUrl: function() { // URL to your privacy policy | |
window.location.assign('https://www.example.com/privacy-policy'); | |
} | |
}); | |
}, []); | |
return ( | |
<> | |
<h1 className="text-center my-3 title">Login Page</h1> | |
<div id="firebaseui-auth-container"></div> | |
<div id="loader" className="text-center">Loading form</div> | |
</> | |
) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment