AppmakerDeveloper

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

  1. Register the block in your theme

    Example:

    import AppleLoginComponent from './components/AppleLoginComponent';

name: 'your-theme/apple-login-button',
View: AppleLoginComponent,

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

On this page

Steps