How to create a google login button

This is a simple example of how to create a google login button in your app.

Steps

​

1. Make sure to activate google login extension from Appmaker Dashboard, and configure it correctly.
2. Make a block for the google login component Example: ​

{
  name: 'your-theme/google-login-button',
  clientId: 'your-theme-google-Login',
  attributes: {},
}

3. Register the block in your theme

   Example:
   ```js
   import GoogleLoginComponent from './components/GoogleLoginComponent';
   
   name: 'your-theme/google-login-button',
   View: GoogleLoginComponent,
   ```

   ​

4. Make a component for the google login button

   Example:​

import { Button, Text } from 'react-native';
import React, { useEffect, useState } from 'react';
import { usePageState } from '@appmaker-xyz/core';
​
export default function GoogleLoginComponent({ attributes, onAction }) {
  const googleLoginLoading = usePageState((state) => state.googleLoginLoading);
  const [buttonLoading, setButtonLoading] = useState(false);
  useEffect(() => {
    setButtonLoading(googleLoginLoading);
  }, [googleLoginLoading]);
​
  if (buttonLoading) {
    return (
      <Text>
        Loading...
      </Text>
    );
  }
  return (
    <Button
      title="Google Login"
      onPress={() => {
        setButtonLoading(true);
        onAction({
          action: 'LOGIN_USER_VIA_GOOGLE',
        });
      }}
      disabled={buttonLoading}
    />
  );
  );
}