Complete oauth functionality for coinbase

Author: thechinedu

src/components/Register/CoinbaseLogin.js

@@ -1,32 +1,26 @@
 import React, { Component } from 'react'
-import { WebView, Linking } from 'react-native';
+import { WebView } from 'react-native';
 import { NavigationActions } from 'react-navigation';
 import { connect } from 'react-redux';
+import { COINBASE_CLIENT_ID as ID, COINBASE_REDIRECT_URI as URI } from '../../config'
 
-class CoinbaseConnect extends Component {
-  render () {
-    const uri = 'https://www.coinbase.com/oauth/authorize?client_id=030e132992e00eb796fcbf4eb1de09860ebd4fd865d462ff78265497dfef4842&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2F&response_type=code&scope=wallet%3Auser%3Aemail'
-    const { navigate, navigation } = this.props
-    const { showWebview } = navigation.state.params
+const coinbaseConnectUri = 'https://www.coinbase.com/oauth/authorize'
+const uri = `${coinbaseConnectUri}?client_id=${ID}&redirect_uri=${encodeURIComponent(URI)}&response_type=code&scope=wallet%3Auser%3Aemail`
 
-    console.log(showWebview, "coinbase connect thingy")
-    return (
-      <WebView
-        ref={(ref) => { this.webview = ref; }}
-        source={{ uri }}
-        style={{marginTop: 30}}
-        onNavigationStateChange={(event) => {
-          if (event.url.includes('?code=')) {
-            let code = event.url.split('?code=').pop()
-            console.log(code, true);
-            this.webview.stopLoading();
-            navigate('SignUp', { oauth: true, oauthProvider: 'coinbase' })
-          }
-        }}
-      />
-    );
-  }
-}
+const CoinbaseConnect = ({ navigate }) =>
+  <WebView
+    ref={(ref) => { this.webview = ref; }}
+    source={{ uri }}
+    style={{marginTop: 30}}
+    onNavigationStateChange={(event) => {
+      if (event.url.includes('?code=')) {
+        let code = event.url.split('?code=').pop()
+        this.webview.stopLoading();
+
+        navigate('SignUp', { oauth: true, oauthProvider: 'coinbase', code })
+      }
+    }}
+  />
 
 const mapDispatchToProps = (dispatch) => {
     return {

src/components/Register/SignUp.js

@@ -14,7 +14,7 @@ import _platform from '../../../native-base-theme/variables/platform';
 import styles from './styles'
 import { login as _login, registerAccount as _registerAccount } from '../../reducers/account'
 import { setLoading as _setLoading, showToast as _showToast } from '../../reducers/ui'
-import { getErrorMsg } from '../../helpers/functions'
+import { getErrorMsg, exchangeCoinbaseCodeForCredentials } from '../../helpers/functions'
 
 const customStyles = {
     header: {
@@ -155,9 +155,33 @@ class SignUp extends Component {
       })
     }
 
+    async useCoinbaseAuth(indicateLoading, loginFn, oauth, oauthProvider, code) {
+      const {
+        access_token: accessToken,
+        refresh_token: refreshToken,
+        email
+      } = await exchangeCoinbaseCodeForCredentials(code)
+      indicateLoading(true, 'Connecting To Coinbase')
+      const success = await loginFn(
+        { email, oauth, oauthProvider },
+        { failureRedirect: false, suppressToast: true }
+      )
+      indicateLoading(false)
+      if (success) {
+          console.log('logged in with Coinbase')
+          return
+      }
+      this.setState({
+          showForm: true,
+          email,
+          accessToken,
+          refreshToken
+      })
+    }
+
     submit = async () => {
         const { registerAccount, navigate, navigation, login, showToast } = this.props
-        const { withGoogle } = navigation.state.params
+        const { oauth, oauthProvider } = navigation.state.params
         const {
             username,
             email,
@@ -173,10 +197,10 @@ class SignUp extends Component {
         } else if (!email) {
             Alert.alert('Email is required')
             return
-        } else if (!withGoogle && !password) {
+        } else if (!oauth && !password) {
             Alert.alert('Password is required')
             return
-        } else if (!withGoogle && password.length < 6) {
+        } else if (!oauth && password.length < 6) {
             Alert.alert('Password must be 6 char min')
             return
         }
@@ -188,19 +212,20 @@ class SignUp extends Component {
                 accessToken,
                 refreshToken,
                 serverAuthCode,
-                withGoogle,
+                oauth,
+                oauth_provider: oauthProvider,
                 invite_code: inviteCode
             })
             showToast('Account Created')
         } catch (err) {
             logger.error('submit, registerAccount', err)
             showToast(getErrorMsg(err))
         }
-        if (withGoogle) {
+        if (oauth) {
             try {
-                await login({ username, accessToken, withGoogle })
+                await login({ email, username, accessToken, oauth, oauthProvider })
             } catch (err) {
-                logger.error('SignUp withGoogle', err)
+                logger.error(`SignUp with oauth provider: ${oauthProvider}`, err)
                 showToast(getErrorMsg(err))
             }
         } else {

src/components/Register/index.js

@@ -108,7 +108,7 @@ class Register extends Component {
                                     title={"Continue With Coinbase"}
                                     block
                                     onPress={() => navigate('Coinbase Connect')}>
-                                    <FontAwesome style={{flex: .1, padding: 10, paddingRight: 0}} color={baseColor} name={'google'} size={30} />
+                                    <FontAwesome style={{flex: .1, padding: 10, paddingRight: 0}} color={baseColor} name={'shield'} size={30} />
                                     <Text style={customStyles.buttonText}>CONTINUE WITH COINBASE</Text>
                                 </Button>
                             </View>

src/config.js

@@ -19,5 +19,8 @@ export const FIREBASE_DATABASE_URL = 'https://tokens-express-200615.firebaseio.c
 export const FIREBASE_PROJECT_ID = 'tokens-express-200615'
 export const FIREBASE_STORAGE_BUCKET = 'tokens-express-200615.appspot.com'
 export const FIREBASE_MESSAGING_SENDER_ID = '947782058234'
+export const COINBASE_CLIENT_ID = '030e132992e00eb796fcbf4eb1de09860ebd4fd865d462ff78265497dfef4842'
+export const COINBASE_CLIENT_SECRET = '5f160e92f4c3f5b45238eadecdb0a4e1b12150cce3283f38d84d45e3c15263d6'
+export const COINBASE_REDIRECT_URI = `${baseURL}/api/accounts/oauth/coinbase`
 
 console.log({ baseURL })

src/helpers/api.js

@@ -59,6 +59,16 @@ export const googleLogin = async (params) => {
   return res.data
 }
 
+export const coinbaseLogin = async (params) => {
+  const res = await instance.post(`/accounts/coinbase-signin`, { ...params })
+  return res.data
+}
+
+export const fetchCoinbaseCredentials = async (code) => {
+  const res = await instance.get(`/accounts/fetch-coinbase-credentials?code=${code}`)
+  return res.data
+}
+
 export const logoutAccount = async (notification_token) => {
 	await instance.post(`/accounts/logout`, { notification_token })
 }

src/helpers/functions.js

@@ -5,7 +5,10 @@ import { NavigationActions } from 'react-navigation';
 import {
     setAuthHeader,
     registerUserForPushNotifications,
-    verifyTwoFactorAuth
+    verifyTwoFactorAuth,
+    fetchCoinbaseCredentials,
+    googleLogin,
+    coinbaseLogin
 } from './api';
 import { setLoading } from '../reducers/ui'
 import { baseURL } from '../config'
@@ -156,7 +159,7 @@ export const get2FA = async function (id, dispatch) {
                 }
             }
         }))
-    }) 
+    })
 }
 
 export const asyncFilter = async (items, iter) => {
@@ -197,3 +200,17 @@ export const visitDeepLink = (url) => {
     //         }))
     // }
 }
+
+export const exchangeCoinbaseCodeForCredentials = async (code) => {
+  const credentials = await fetchCoinbaseCredentials(code)
+  return credentials
+}
+
+export const oauthLogin = (provider) => {
+  switch(provider.toLowerCase()) {
+    case 'google':
+      return googleLogin;
+    case 'coinbase':
+      return coinbaseLogin;
+  }
+}