Cara menggunakan spring mongodb authentication

FirebaseUI is a library built on top of the Firebase Authentication SDK that provides drop-in UI flows for use in your app. FirebaseUI provides the following benefits:

  • Multiple Providers - sign-in flows for email/password, email link, phone authentication, Google, Facebook, Twitter and GitHub sign-in.
  • Account Linking - flows to safely link user accounts across identity providers.
  • Customization - override CSS styles of FirebaseUI to match your app requirements. Also, because FirebaseUI is open source, you can fork the project and customize it exactly to your needs.
  • One-tap sign-up and automatic sign-in - automatic integration with One-tap sign-up for fast cross-device sign-in.
  • Localized UI - internationalization for over 40 languages.
  • Upgrading anonymous users - ability to upgrade anonymous users through sign-in/sign-up. For more information, visit the .
Warning: FirebaseUI is not currently compatible with the . The v9 compatibility layer (specifically, the app-compat and auth-compat packages) permits the usage of FirebaseUI alongside v9, but without the app size reduction and other benefits of the v9 SDK.

Before you begin

  1. Add Firebase Authentication to your web application, ensuring you're using the v9 compat (recommended) or older SDK (see sidebar above).

  2. Include FirebaseUI via one of the following options:

    1. CDN

      Include the following script and CSS file in the <head> tag of your page, below the initialization snippet from the Firebase Console:

      <script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
      <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />
      
    2. npm Module

      Install FirebaseUI and its dependencies via npm using the following command:

      $ npm install firebaseui --save
      

      var firebase = require('firebase');
      var firebaseui = require('firebaseui');
      
      0 the following modules within your source files:

      var firebase = require('firebase');
      var firebaseui = require('firebaseui');
      
    3. Bower Component

      Install FirebaseUI and its dependencies via Bower using the following command:

      $ bower install firebaseui --save
      

      Include the required files in your HTML, if your HTTP Server serves the files within

      var firebase = require('firebase');
      var firebaseui = require('firebaseui');
      
      1:

      <script src="bower_components/firebaseui/dist/firebaseui.js"></script>
      <link type="text/css" rel="stylesheet" href="bower_components/firebaseui/dist/firebaseui.css" />
      

Initialize FirebaseUI

After importing the SDK, initialize the Auth UI.

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

Set up sign-in methods

Before you can use Firebase to sign in users, you must enable and configure the sign-in methods you want to support.

Email address and password

  1. In the Firebase console, open the Authentication section and enable email and password authentication.

  2. Add the email provider ID to the list of FirebaseUI

    var firebase = require('firebase');
    var firebaseui = require('firebaseui');
    
    2.

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        firebase.auth.EmailAuthProvider.PROVIDER_ID
      ],
      // Other config options...
    });
    
  3. Optional: The

    var firebase = require('firebase');
    var firebaseui = require('firebaseui');
    
    3 can be configured to require the user to enter a display name (defaults to
    var firebase = require('firebase');
    var firebaseui = require('firebaseui');
    
    4).

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        {
          provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
          requireDisplayName: false
        }
      ]
    });
    
  1. In the Firebase console, open the Authentication section. On the Sign in method tab, enable the Email/Password provider. Note that email/password sign-in must be enabled to use email link sign-in.

  2. In the same section, enable Email link (passwordless sign-in) sign-in method and click Save.

  3. Add the email provider ID to the list of FirebaseUI

    var firebase = require('firebase');
    var firebaseui = require('firebaseui');
    
    2 along with the email link
    var firebase = require('firebase');
    var firebaseui = require('firebaseui');
    
    6.

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        {
          provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
          signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD
        }
      ],
      // Other config options...
    });
    
  4. When rendering the sign-in UI conditionally (relevant for single page apps), use

    var firebase = require('firebase');
    var firebaseui = require('firebaseui');
    
    7 to detect if the URL corresponds to a sign-in with email link and the UI needs to be rendered to complete sign-in.

    // Is there an email link sign-in?
    if (ui.isPendingRedirect()) {
      ui.start('#firebaseui-auth-container', uiConfig);
    }
    // This can also be done via:
    if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
      ui.start('#firebaseui-auth-container', uiConfig);
    }
    
  5. Optional: The

    var firebase = require('firebase');
    var firebaseui = require('firebaseui');
    
    3 for email link sign-in can be configured to allow or block the user from completing cross device sign-in.

    An optional

    var firebase = require('firebase');
    var firebaseui = require('firebaseui');
    
    9 callback can be defined to return the configuration to use when sending the link. This provides the ability to specify how the link can be handled, custom dynamic link, additional state in the deep link, etc. When not provided, the current URL is used and a web only flow is triggered.

    Email link sign-in in FirebaseUI-web is compatible with and where one user starting the flow from FirebaseUI-Android can open the link and complete sign-in with FirebaseUI-web. The same is true for the opposite flow.

    $ npm install firebaseui --save
    
    0

OAuth providers (Google, Facebook, Twitter and GitHub)

  1. In the Firebase console, open the Authentication section and enable the specified OAuth provider sign-in. Make sure the corresponding OAuth client ID and secret are also specified.

  2. Also in the Authentication section, make sure the domain where your sign-in page will be rendered is also added to the authorized domains list.

  3. Add the OAuth provider ID to the list of FirebaseUI

    var firebase = require('firebase');
    var firebaseui = require('firebaseui');
    
    2.

    $ npm install firebaseui --save
    
    1
  4. Optional: To specify custom scopes, or custom OAuth parameters per provider, you can pass an object instead of just the provider value:

    $ npm install firebaseui --save
    
    2

Phone number

  1. In the Firebase console, open the Authentication section and enable phone number sign-in.

  2. Make sure the domain where your sign-in page will be rendered is also added to the authorized domain list.

  3. Add the phone number provider ID to the list of FirebaseUI

    var firebase = require('firebase');
    var firebaseui = require('firebaseui');
    
    2.

    $ npm install firebaseui --save
    
    3
  4. Optional: The PhoneAuthProvider can be configured with custom reCAPTCHA parameters whether reCAPTCHA is visible or invisible (defaults to normal). Refer to the reCAPTCHA API docs for more details.

    The default country to select in the phone number input can also be set. Refer to the list of supported country codes for the full list of codes. If unspecified, the phone number input will default to the United States (+1).

    The following options are currently supported.

    $ npm install firebaseui --save
    
    4

Sign in

To kick off the FirebaseUI sign in flow, initialize the FirebaseUI instance by passing the underlying

$ bower install firebaseui --save
3 instance.

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

Define the HTML element where the FirebaseUI sign-in widget will be rendered.

$ npm install firebaseui --save
6

Specify the FirebaseUI configuration (providers supported and UI customizations as well as success callbacks, etc).

$ npm install firebaseui --save
7

Finally, render the FirebaseUI Auth interface:

$ npm install firebaseui --save
8

Upgrading anonymous users

Enabling anonymous user upgrade

When an anonymous user signs in or signs up with a permanent account, you want to be sure the user can continue with what they were doing before signing up. To do so, simply set

$ bower install firebaseui --save
4 to
var firebase = require('firebase');
var firebaseui = require('firebaseui');
4 when you configure the sign-in UI (this option is disabled by default).

Handling anonymous user upgrade merge conflicts

There are cases when a user, initially signed in anonymously, tries to upgrade to an existing Firebase user. Since an existing user cannot be linked to another existing user, FirebaseUI will trigger the

$ bower install firebaseui --save
6 callback with an error code
$ bower install firebaseui --save
7 when the above occurs. The error object will also contain the permanent credential. Sign-in with the permanent credential should be triggered in the callback to complete sign-in. Before sign-in can be completed via
$ bower install firebaseui --save
8, you must save the anonymous user's data and delete the anonymous user. Then, after sign-in completion, copy the data back to the non-anonymous user. An example below illustrates how this flow would work.