lincd-capacitor

How to use Capacitor Packages

Capacitor Provider

When you enable CapacitorProvider, some features such as validate the token for authentication, storage for token, and deeplinks will automatically work.

Installation

CapacitorProvider required lincd-auth so don't forget to install the dependencies first.

yarn add lincd-auth lincd-capacitor
yarn add @capacitor/app @capacitor/preferences @capacitor/core

import {ProvideAuth} from 'lincd-auth/lib/hooks/useAuth';
import {CapacitorProvider} from 'lincd-capacitor/lib/hooks/useCapacitor';
import {useNavigate} from 'react-router-dom';

const navigate = useNavigate();

<ProvideAuth {...requiredProps}>
  <CapacitorProvider navigate={navigate}>
    {/* Your application code */}
  </CapacitorProvider>
  ;
</ProvideAuth>;

SigninWithGoogleButton Component

The SigninWithGoogleButton component is a reusable React component designed to render a button for signing in with Google. It uses the @codetrix-studio/capacitor-google-auth library for Google OAuth authentication.

Installation

Install the @codetrix-studio/capacitor-google-auth and lincd-capacitor library:

yarn add @codetrix-studio/capacitor-google-auth
yarn add lincd-capacitor

Usage

import {SigninWithGoogleButton} from 'lincd-capacitor/lib/components/SigninWithGoogleButton';

// example callback when signin with google success
// and then redirect into index path
const signinWithGoogleCallback = (data) => {
  navigate(ROUTES.index.path);
};

// render component into your pages
<SigninWithGoogleButton onCallback={signinWithGoogleCallback} />;

Environment

Add GOOGLE_CLIENT_ID to your environment. You can get the client ID obtained from the Google Cloud Console for your project.

"GOOGLE_CLIENT_ID": "37615621...apps.googleusercontent.com",

Props

• onCallback (required): A callback function invoked when the Google authentication is successful. It receives the authentication response data.

• label (optional): The text to display on the button. Default is 'Sign in with Google'.

• scopes (optional): An array of strings specifying the Google API access scopes. Default is ['profile', 'email'].

• className (optional): Additional CSS class names to apply to the button.

• restProps (optional): Additional props to pass to the underlying Button component.

SigninWithAppleButton Component

The SigninWithAppleButton component is a reusable React component designed to render a button for signing in with Apple. It uses the @capacitor-community/apple-sign-in library for Apple authentication.

Installation

Install the @capacitor-community/apple-sign-in and lincd-capacitor library into your project:

yarn add @capacitor-community/apple-sign-in
yarn add lincd-capacitor

Usage

import {SigninWithAppleButton} from 'lincd-capacitor/lib/components/SigninWithAppleButton';

// example callback when signin success
// and then redirect into index path
const onLoggedIn = (data) => {
  navigate(ROUTES.index.path);
};

// render component into your pages
<SigninWithAppleButton onCallback={onLoggedIn} />;

Environment

Add APP_ID to your environment. You can get from appId capacitor.config.ts on your project.

"APP_ID": "com.yourproject.app",

Props

• onCallback (required): A callback function invoked when the Google authentication is successful. It receives the authentication response data.

• label (optional): The text to display on the button. Default is 'Sign in with Google'.

• scopes (optional): String permission scopes from Apple. Default is 'profile, email'.

• className (optional): Additional CSS class names to apply to the button.

• restProps (optional): Additional props to pass to the underlying Button component.

SigninWithFacebookButton Component

The SigninWithFacebookButton component is a reusable React component designed to render a button for signing in with Facebook. It utilizes the @capacitor-community/facebook-login library for Facebook OAuth authentication.

Installation

Install the @capacitor-community/facebook-login and lincd-capacitor library:

yarn add @capacitor-community/facebook-login
yarn add lincd-capacitor

Usage

import {SigninWithFacebookButton} from 'lincd-capacitor/lib/components/SigninWithFacebookButton';

// Example callback when signing in with Facebook is successful
// and then redirect into the index path
const signinWithFacebookCallback = (data) => {
  navigate(ROUTES.index.path);
};

// Render component into your pages
<SigninWithFacebookButton onCallback={signinWithFacebookCallback} />;

Environment

Add FACEBOOK_CLIENT_ID to your environment. Obtain the client ID from the Facebook Developer Console for your project.

"FACEBOOK_CLIENT_ID": "123456789012345",

Props

• onCallback (required): A callback function invoked when the Facebook authentication is successful. It receives the authentication response data.
• label (optional): The text to display on the button. Default is 'Sign in with Facebook'.
• scopes (optional): An array of strings specifying the Facebook API access scopes. Default is ['email'].
• className (optional): Additional CSS class names to apply to the button.
• restProps (optional): Additional props to pass to the underlying Button component.

Location

Create android location permission in App/src/AndroidManifest.xml to make getLocation works

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />