How to create a apple login button

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

Steps

​

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

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

3. Register the block in your theme

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

   ​

4. Make a component for the apple login button ​

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