AppmakerDeveloper

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: {},
}

  1. Register the block in your theme

    Example:

    import GoogleLoginComponent from './components/GoogleLoginComponent';

name: 'your-theme/google-login-button',
View: GoogleLoginComponent,

  2. 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}
    />
  );
  );
}

On this page

Steps