feat(backend-bitbucket): add implicit auth (#2247)

packages/netlify-cms-backend-bitbucket/src/AuthenticationPage.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
-import { NetlifyAuthenticator } from 'netlify-cms-lib-auth';
+import { NetlifyAuthenticator, ImplicitAuthenticator } from 'netlify-cms-lib-auth';
 import { AuthenticationPage, Icon } from 'netlify-cms-ui-default';
 
 const LoginButtonIcon = styled(Icon)`
@@ -17,23 +17,48 @@ export default class BitbucketAuthenticationPage extends React.Component {
     siteId: PropTypes.string,
     authEndpoint: PropTypes.string,
     config: ImmutablePropTypes.map,
+    clearHash: PropTypes.func,
   };
 
   state = {};
 
+  componentDidMount() {
+    const authType = this.props.config.getIn(['backend', 'auth_type']);
+    if (authType === 'implicit') {
+      this.auth = new ImplicitAuthenticator({
+        base_url: this.props.config.getIn(['backend', 'base_url'], 'https://bitbucket.org'),
+        auth_endpoint: this.props.config.getIn(
+          ['backend', 'auth_endpoint'],
+          'site/oauth2/authorize',
+        ),
+        app_id: this.props.config.getIn(['backend', 'app_id']),
+        clearHash: this.props.clearHash,
+      });
+      // Complete implicit authentication if we were redirected back to from the provider.
+      this.auth.completeAuth((err, data) => {
+        if (err) {
+          this.setState({ loginError: err.toString() });
+          return;
+        }
+        this.props.onLogin(data);
+      });
+      this.authSettings = { scope: 'repository:write' };
+    } else {
+      this.auth = new NetlifyAuthenticator({
+        base_url: this.props.base_url,
+        site_id:
+          document.location.host.split(':')[0] === 'localhost'
+            ? 'cms.netlify.com'
+            : this.props.siteId,
+        auth_endpoint: this.props.authEndpoint,
+      });
+      this.authSettings = { provider: 'bitbucket', scope: 'repo' };
+    }
+  }
+
   handleLogin = e => {
     e.preventDefault();
-    const cfg = {
+    this.auth.authenticate(this.authSettings, (err, data) => {
-      base_url: this.props.base_url,
-      site_id:
-        document.location.host.split(':')[0] === 'localhost'
-          ? 'cms.netlify.com'
-          : this.props.siteId,
-      auth_endpoint: this.props.authEndpoint,
-    };
-    const auth = new NetlifyAuthenticator(cfg);
-
-    auth.authenticate({ provider: 'bitbucket', scope: 'repo' }, (err, data) => {
       if (err) {
         this.setState({ loginError: err.toString() });
         return;

website/content/docs/authentication-backends.md

@@ -142,6 +142,20 @@ To enable it:
       repo: owner-name/repo-name # Path to your Bitbucket repository
     ```
 
+### Client-Side Implicit Grant
+
+With Bitbucket's Implicit Grant, users can authenticate with Bitbucket directly from the client. To do this:
+
+1. Follow the authentication provider setup steps in the [Netlify docs](https://www.netlify.com/docs/authentication-providers/#using-an-authentication-provider), make sure you allow 'Account/Read' and 'Repository/Write'.
+2. Bitbucket gives you a **Key**. Copy this Key and enter it in your Netlify CMD `config.yml` file, along with the following settings:
+
+    backend:
+      name: bitbucket
+      repo: owner-name/repo-name
+      branch: default
+      auth_type: implicit
+      app_id: # The Key from your Bitbucket settings
+
 ## Test Repo Backend
 You can use the `test-repo` backend to try out Netlify CMS without connecting to a Git repo. With this backend, you can write and publish content normally, but any changes will disapear when you reload the page. This backend powers the Netlify CMS [demo site](https://cms-demo.netlify.com/).