Skip to content

Instantly share code, notes, and snippets.

@nicolasmontielf

nicolasmontielf/Login.tsx

Last active February 8, 2023 23:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nicolasmontielf/13a050270e6465a757dda05aeae0656f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nicolasmontielf/13a050270e6465a757dda05aeae0656f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. nicolasmontielf revised this gist Feb 8, 2023. 1 changed file with 5 additions and 4 deletions.
    9 changes: 5 additions & 4 deletions Login.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -20,11 +20,12 @@ export default () => {
    // 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',
    signInOptions: [
    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,
    @@ -33,8 +34,8 @@ export default () => {
    }
    }
    ],
    tosUrl: 'https://www.example.com/terms-conditions',
    privacyPolicyUrl: function() {
    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');
    }
    });
  2. nicolasmontielf created this gist Jan 13, 2023.
    50 changes: 50 additions & 0 deletions Login.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,50 @@
    // 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() {
    document.getElementById('loader')!.style.display = 'none';
    }
    },
    signInSuccessUrl: 'https://www.anyurl.com',
    signInOptions: [
    {
    provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
    requireDisplayName: true,
    disableSignUp: {
    status: true
    }
    }
    ],
    tosUrl: 'https://www.example.com/terms-conditions',
    privacyPolicyUrl: function() {
    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>
    </>
    )
    }