Add Google OAuth2 authentication flow

README.md

@@ -30,12 +30,17 @@ If you have a patch or have stumbled upon an issue with the Newspack plugin/them
 Some features require environment variables to be set (e.g. in `wp-config.php`):
 
 ```php
-// support
-define('NEWSPACK_SUPPORT_API_URL', 'https://super-tech-support.zendesk.com/api/v2');
-define('NEWSPACK_SUPPORT_EMAIL', '[email protected]');
-define('NEWSPACK_WPCOM_CLIENT_ID', '12345');
-// optional
-define('NEWSPACK_SUPPORT_IS_PRE_LAUNCH', true);
+// Support
+define( 'NEWSPACK_SUPPORT_API_URL', 'https://super-tech-support.zendesk.com/api/v2' );
+define( 'NEWSPACK_SUPPORT_EMAIL', '[email protected]' );
+define( 'NEWSPACK_WPCOM_CLIENT_ID', '12345' );
+
+// OAuth2
+define( 'NEWSPACK_GOOGLE_OAUTH_CLIENT_ID', 'abc' );
+define( 'NEWSPACK_GOOGLE_OAUTH_CLIENT_SECRET', 'abc' );
+
+// Optional
+define( 'NEWSPACK_SUPPORT_IS_PRE_LAUNCH', true );
 ```
 
 ## News Consumer Insights integration

assets/components/src/global-notices/index.js

@@ -13,9 +13,12 @@ const GlobalNotices = () => {
 	if ( ! notice ) {
 		return null;
 	}
-	return notice
-		.split( ',' )
-		.map( ( text, i ) => <Notice isSuccess noticeText={ text } key={ i } /> );
+	return notice.split( ',' ).map( ( text, i ) => {
+		if ( text.indexOf( '_error_' ) === 0 ) {
+			return <Notice isError noticeText={ text.replace( '_error_', '' ) } key={ i } />;
+		}
+		return <Notice isSuccess noticeText={ text } key={ i } />;
+	} );
 };
 
 export default GlobalNotices;

assets/wizards/dashboard/index.js

@@ -2,48 +2,139 @@
 
 import '../../shared/js/public-path';
 
+/**
+ * External dependencies.
+ */
+import qs from 'qs';
+
 /**
  * WordPress dependencies.
  */
-import { Component, Fragment, render } from '@wordpress/element';
+import { useEffect, useState, Fragment, render } from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
+import { __ } from '@wordpress/i18n';
+import { Icon, plugins } from '@wordpress/icons';
 
 /**
  * Internal dependencies.
  */
-import { GlobalNotices, Footer, Grid, NewspackLogo } from '../../components/src';
+import {
+	GlobalNotices,
+	Button,
+	Card,
+	Waiting,
+	Footer,
+	Grid,
+	NewspackLogo,
+} from '../../components/src';
 import DashboardCard from './views/dashboardCard';
 import './style.scss';
 
 /**
- * Newspack Dashboard.
+ * External dependencies.
  */
-class Dashboard extends Component {
-	/**
-	 * Render.
-	 */
-	render() {
-		const { items } = this.props;
-
-		return (
-			<Fragment>
-				<div className="newspack-wizard__header">
-					<div className="newspack-wizard__header__inner">
-						<NewspackLogo centered height={ 72 } />
-					</div>
-				</div>
-				<div className="mw6 mr-auto ml-auto">
-					<GlobalNotices />
-				</div>
-				<div className="newspack-wizard newspack-wizard__content">
-					<Grid columns={ 3 } gutter={ 32 }>
-						{ items.map( card => (
-							<DashboardCard { ...card } key={ card.slug } />
-						) ) }
-					</Grid>
+import classnames from 'classnames';
+
+const Dashboard = ( { items } ) => {
+	const params = qs.parse( window.location.search );
+	const authCode = params.code;
+	const [ authState, setAuthState ] = useState( {} );
+
+	const userBasicInfo = authState.user_basic_info;
+	const canUseOauth = authState.can_google_auth;
+
+	const displayAuth = canUseOauth && ! authCode;
+
+	useEffect( () => {
+		apiFetch( { path: '/newspack/v1/oauth/google' } ).then( setAuthState );
+	}, [] );
+
+	useEffect( () => {
+		if ( canUseOauth && authCode ) {
+			apiFetch( {
+				path: '/newspack/v1/oauth/google',
+				method: 'POST',
+				data: {
+					auth_code: authCode,
+					state: params.state,
+				},
+			} )
+				.then( () => {
+					window.location =
+						'/wp-admin/admin.php?' +
+						qs.stringify( {
+							page: 'newspack',
+							'newspack-notice': __( 'Successfully authenticated with Google.', 'newspack' ),
+						} );
+				} )
+				.catch( e => {
+					window.location =
+						'/wp-admin/admin.php?' +
+						qs.stringify( {
+							page: 'newspack',
+							'newspack-notice':
+								'_error_' +
+								( e.message ||
+									__( 'Something went wrong during authentication with Google.', 'newspack' ) ),
+						} );
+				} );
+		}
+	}, [ canUseOauth ] );
+
+	const goToAuthPage = () => {
+		apiFetch( {
+			path: '/newspack/v1/oauth/google/get-url',
+		} ).then( url => ( window.location = url ) );
+	};
+
+	return (
+		<Fragment>
+			<GlobalNotices />
+			<div className="newspack-wizard__header">
+				<div className="newspack-wizard__header__inner">
+					<NewspackLogo centered height={ 72 } />
 				</div>
-				<Footer />
-			</Fragment>
-		);
-	}
-}
+			</div>
+			<div className="newspack-wizard newspack-wizard__content">
+				<Grid columns={ 3 } gutter={ 32 }>
+					{ items.map( card => (
+						<DashboardCard { ...card } key={ card.slug } />
+					) ) }
+					{ authCode && (
+						<div className="flex justify-around items-center">
+							<Waiting />
+						</div>
+					) }
+					{ displayAuth ? (
+						<Card className={ classnames( 'newspack-dashboard-card', 'google-oauth2' ) }>
+							{ userBasicInfo ? (
+								<div className="newspack-dashboard-card__contents">
+									<Icon icon={ plugins } />
+									<div className="newspack-dashboard-card__header">
+										<h2>{ __( 'Google OAuth2' ) }</h2>
+										<p>
+											{ __( 'Authorized Google as', 'newspack' ) }{' '}
+											<strong>{ userBasicInfo.email }</strong>
+										</p>
+									</div>
+								</div>
+							) : (
+								<Button onClick={ goToAuthPage }>
+									<div className="newspack-dashboard-card__contents">
+										<Icon icon={ plugins } />
+										<div className="newspack-dashboard-card__header">
+											<h2>{ __( 'Google OAuth2' ) }</h2>
+											<p>{ __( 'Authorize Newspack with Google', 'newspack' ) }</p>
+										</div>
+									</div>
+								</Button>
+							) }
+						</Card>
+					) : null }
+				</Grid>
+			</div>
+			<Footer />
+		</Fragment>
+	);
+};
 render( <Dashboard items={ newspack_dashboard } />, document.getElementById( 'newspack' ) );

assets/wizards/dashboard/style.scss

@@ -16,13 +16,17 @@
 		}
 	}
 
-	a {
+	a,
+	body[class*='admin-color-'] & .newspack-button {
 		align-items: center;
 		border-radius: inherit;
 		color: inherit;
 		display: flex;
+		font-weight: inherit;
 		height: 100%;
 		justify-content: space-between;
+		padding: 0;
+		text-align: inherit;
 		text-decoration: none;
 		transition: background-color 125ms ease-in-out, box-shadow 125ms ease-in-out;
 
@@ -31,6 +35,7 @@
 		&:hover {
 			background-color: $light-gray-100;
 			box-shadow: 0 4px 8px rgba( black, 0.08 );
+			color: $primary-600;
 
 			h2 {
 				color: inherit;
@@ -81,3 +86,7 @@
 		}
 	}
 }
+
+.newspack-notice {
+	margin: 0;
+}

composer.json

@@ -8,8 +8,9 @@
 			"issues": "https://github.com/Automattic/newspack-plugin/issues"
 	},
 	"require"    : {
-			"composer/installers": "~1.6",
-      "joshtronic/php-loremipsum": "^1.0"
+		"composer/installers": "~1.6",
+		"joshtronic/php-loremipsum": "^1.0",
+		"google/auth": "^1.15"
 	},
 	"require-dev": {
 		"brainmaestro/composer-git-hooks": "^2.6",