Authenticate Using Yahoo with JavaScript

You can let your users authenticate with Firebase using OAuth providers like Yahoo by integrating generic OAuth Login into your app using the Firebase SDK to carry out the end to end sign-in flow.

Before you begin

To sign in users using Yahoo accounts, you must first enable Yahoo as a sign-in provider for your Firebase project:

Add Firebase to your JavaScript project.
In the Firebase console, open the Auth section.
On the Sign in method tab, enable the Yahoo provider.
Add the Client ID and Client Secret from that provider's developer console to the provider configuration:
1. To register a Yahoo OAuth client, follow the Yahoo instructions on registering a web application with Yahoo.
2. When registering apps with these providers, be sure to register the *.firebaseapp.com domain for your project as the redirect domain for your app.
Click Save.

Handle the sign-in flow with the Firebase SDK

If you are building a web app, the easiest way to authenticate your users with Firebase using their Yahoo accounts is to handle the entire sign-in flow with the Firebase JavaScript SDK.

To handle the sign-in flow with the Firebase JavaScript SDK, follow these steps:

Create an instance of an OAuthProvider using the provider ID yahoo.com.
```
var provider = new firebase.auth.OAuthProvider('yahoo.com');
```
Optional: Specify additional custom OAuth parameters that you want to send with the OAuth request.
```
provider.setCustomParameters({
  // Prompt user to re-authenticate to Yahoo.
  prompt: 'login',
  // Localize to French.
  language: 'fr'
});
```
For the parameters Yahoo supports, see the Yahoo OAuth documentation. Note that you can't pass Firebase-required parameters with setCustomParameters(). These parameters are client_id, redirect_uri, response_type, scope and state.
Optional: Specify additional OAuth 2.0 scopes beyond basic profile that you want to request from the authentication provider. If your application requires access to private user data from Yahoo APIs, you'll need to request permissions to access Yahoo APIs under API Permissions in the Yahoo developer console. Requested OAuth scopes must be exact matches to the preconfigured ones in the app's API permissions. For example if, read/write access is requested to user contacts and preconfigured in the app's API permissions, sdct-w has to be passed instead of the readonly OAuth scope sdct-r. Otherwise, the flow will fail and an error would be shown to the end user.
```
// Request access to Yahoo Mail API.
provider.addScope('mail-r');
// Request read/write access to user contacts.
// This must be preconfigured in the app's API permissions.
provider.addScope('sdct-w');
```
To learn more, refer to the Yahoo scopes documentation.

Authenticate with Firebase using the OAuth provider object. You can prompt your users to sign in with their Yahoo Accounts either by opening a pop-up window or by redirecting to the sign-in page. The redirect method is preferred on mobile devices.

To sign in with a pop-up window, call signInWithPopup:

firebase.auth().signInWithPopup(provider)
  .then(function(result) {
    // User is signed in.
    // IdP data available in result.additionalUserInfo.profile.
    // Yahoo OAuth access token can be retrieved by calling:
    // result.credential.accessToken
    // Yahoo OAuth ID token can be retrieved by calling:
    // result.credential.idToken
  })
  .catch(function(error) {
    // Handle error.
  });

To sign in by redirecting to the sign-in page, call signInWithRedirect:

firebase.auth().signInWithRedirect(provider);

After the user completes sign-in and returns to the page, you can obtain the sign-in result by calling getRedirectResult.

firebase.auth().getRedirectResult()
  .then(function(result) {
    // User is signed in.
    // IdP data available in result.additionalUserInfo.profile.
    // Yahoo OAuth access token can be retrieved by calling:
    // result.credential.accessToken
    // Yahoo OAuth ID token can be retrieved by calling:
    // result.credential.idToken
  })
  .catch(function(error) {
    // Handle error.
  });

On successful completion, the OAuth ID token and access token associated with the provider can be retrieved from the firebase.auth.UserCredential object returned.

Using the OAuth access token, you can call the Yahoo API.

For example, to get the basic profile information, the following REST API can be called:

curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://social.yahooapis.com/v1/user/YAHOO_USER_UID/profile?format=json

Where YAHOO_USER_UID is the Yahoo user's ID which can be retrieved from the firebase.auth().currentUser.providerData[0].uid field or from result.additionalUserInfo.profile.

While the above examples focus on sign-in flows, you also have the ability to link a Yahoo provider to an existing user using linkWithPopup/linkWithRedirect. For example, you can link multiple providers to the same user allowing them to sign in with either.

var provider = new firebase.auth.OAuthProvider('yahoo.com');
firebase.auth().currentUser.linkWithPopup(provider)
    .then(function(result) {
      // Yahoo credential is linked to the current user.
      // IdP data available in result.additionalUserInfo.profile.
      // Yahoo OAuth access token can be retrieved by calling:
      // result.credential.accessToken
      // Yahoo OAuth ID token can be retrieved by calling:
      // result.credential.idToken
    })
    .catch(function(error) {
      // Handle error.
    });

The same pattern can be used with reauthenticateWithPopup/reauthenticateWithRedirect which can be used to retrieve fresh credentials for sensitive operations that require recent login.

var provider = new firebase.auth.OAuthProvider('yahoo.com');
firebase.auth().currentUser.reauthenticateWithPopup(provider)
    .then(function(result) {
      // User is re-authenticated with fresh tokens minted and
      // should be able to perform sensitive operations like account
      // deletion and email or password update.
      // IdP data available in result.additionalUserInfo.profile.
      // Yahoo OAuth access token can be retrieved by calling:
      // result.credential.accessToken
      // Yahoo OAuth ID token can be retrieved by calling:
      // result.credential.idToken
    })
    .catch(function(error) {
      // Handle error.
    });

Handling account-exists-with-different-credential Errors

If you enabled the One account per email address setting in the Firebase console, when a user tries to sign in a to a provider (such as Yahoo) with an email that already exists for another Firebase user's provider (such as Google), the error auth/account-exists-with-different-credential is thrown along with an AuthCredential object (Yahoo credential). To complete the sign in to the intended provider, the user has to sign first to the existing provider (Google) and then link to the former AuthCredential (Yahoo credential).

Popup mode

If you use signInWithPopup, you can handle auth/account-exists-with-different-credential errors with code like the following example:


// Step 1.
// User tries to sign in to Yahoo.
auth.signInWithPopup(new firebase.auth.OAuthProvider('yahoo.com')).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Yahoo credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(user) {
          // Step 4a.
          return user.linkWithCredential(pendingCred);
        }).then(function() {
          // Yahoo account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that he already has an account
      // but with a different provider, and let him validate the fact he wants to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account he owns.
        // Step 4b.
        // Link to Yahoo credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Yahoo account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

Redirect mode

This error is handled in a similar way in the redirect mode, with the difference that the pending credential has to be cached between page redirects (for example, using session storage).

Advanced: Handle the sign-in flow manually

Unlike other OAuth providers supported by Firebase such as Google, Facebook, and Twitter, where sign-in can directly be achieved with OAuth access token based credentials, Firebase Auth does not support the same capability for providers such as Yahoo due to the inability of the Firebase Auth server to verify the audience of Yahoo OAuth access tokens. This is a critical security requirement and could expose applications and websites to replay attacks where a Yahoo OAuth access token obtained for one project (attacker) can be used to sign in to another project (victim). Instead, Firebase Auth offers the ability to handle the entire OAuth flow and the authorization code exchange using the OAuth client ID and secret configured in the Firebase Console. As the authorization code can only be used in conjunction with a specific client ID/secret, an authorization code obtained for one project cannot be used with another.

If these providers are required to be used in unsupported environments, a third party OAuth library and Firebase custom authentication would need to be used. The former is needed to authenticate with the provider and the latter to exchange the provider’s credential for a custom token.

Authenticate with Firebase in a Chrome extension

If you are building a Chrome extension app, you must whitelist your Chrome extension ID:

Open your project in the Firebase console.
In the Authentication section, open the Sign-in method page.
Add a URI like the following to the list of Authorized Domains:
```
chrome-extension://CHROME_EXTENSION_ID
```

Only popup operations (signInWithPopup and linkWithPopup) are available to Chrome extensions, as Chrome extensions cannot use HTTP redirects. You should call these methods from a background script rather than a browser action popup, as the authentication popup will cancel the browser action popup.

In your Chrome extension's manifest file make sure that you add the https://apis.google.com URL to the content_security_policy whitelist.

Customizing the redirect domain for Yahoo sign-in

On project creation, Firebase will provision a unique subdomain for your project: https://my-app-12345.firebaseapp.com

This will also be used as the redirect mechanism for OAuth sign in. That domain would need to be whitelisted for all supported OAuth providers. However, this means that users may see that domain while signing in to Yahoo before redirecting back to the application: Continue to: https://my-app-12345.firebaseapp.com

To customize the URL in the message to show a custom domain: Continue to: https://auth.custom.domain.com

Create a CNAME record for your custom domain that points to your project's subdomain on firebaseapp.com:
```
auth.custom.domain.com CNAME my-app-12345.firebaseapp.com
```
Add your custom domain to the list of authorized domains in the Firebase console: auth.custom.domain.com.
In the Yahoo developer console or OAuth setup page, whitelist the URL of the redirect page, which will be accessible on your custom domain: https://auth.custom.domain.com/__/auth/handler.

When you initialize the JavaScript library, specify your custom domain with the authDomain field:

var config = {
  apiKey: '...',
  // Changed from 'my-app-12345.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://my-app-12345.firebaseio.com',
  projectId: 'my-app-12345',
  storageBucket: 'my-app-12345.appspot.com',
  messagingSenderId: '1234567890'
};
firebase.initializeApp(config);

Next steps

After a user signs in for the first time, a new user account is created and linked to the credentials—that is, the user name and password, phone number, or auth provider information—the user signed in with. This new account is stored as part of your Firebase project, and can be used to identify a user across every app in your project, regardless of how the user signs in.

In your apps, the recommended way to know the auth status of your user is to set an observer on the Auth object. You can then get the user's basic profile information from the User object. See Manage Users.
In your Firebase Realtime Database and Cloud Storage Security Rules, you can get the signed-in user's unique user ID from the auth variable, and use it to control what data a user can access.

You can allow users to sign in to your app using multiple authentication providers by linking auth provider credentials to an existing user account.

To sign out a user, call signOut:

firebase.auth().signOut().then(function() {
  // Sign-out successful.
}).catch(function(error) {
  // An error happened.
});