arthera-login-react-sdk

ArtheraLoginSDK API Reference

Table of Contents

• Introduction

• Installation

• Usage

• API Methods

  • constructor()

  • isLoggedIn()

  • loginWithMicrosoft(token, id)

  • loginWithGithub(code, user)

  • loginWithTwitter(token, user)

  • loginWithGoogle(token, sub)

  • getAddress()

  • getProvider()

  • logout()

  • handleLogin()

  • generateCodeVerifierAndChallenge()

  • fetchGoogleUserInfo(accessToken)

• LoginSocialTwitter Component

  • Props

  • Usage

• Creating the LoginSocialTwitter Component

Introduction

The [ArtheraLoginSDK] class provides methods for handling user authentication and login using various social login providers such as Microsoft, GitHub, Twitter, and Google. It also manages the user's wallet address and provider information.

Installation

To use the [ArtheraLoginSDK] in your project, you need to install the necessary dependencies:

npm install axios qs crypto-js @ethersproject/providers @ethersproject/transactions

Configuration

The config.js file contains the configuration for the social login providers. Make sure to set the appropriate environment variables for each provider:

config.js

const config = {
  MICROSOFT_APP_ID: process.env.REACT_APP_MICROSOFT_APP_ID,
  GITHUB_APP_ID: process.env.REACT_APP_GITHUB_APP_ID,
  GITHUB_APP_SECRET: process.env.REACT_APP_GITHUB_APP_SECRET,
  TWITTER_APP_ID: process.env.REACT_APP_TWITTER_APP_ID,
  TWITTER_V2_APP_KEY: process.env.REACT_APP_TWITTER_V2_APP_KEY,
  TWITTER_V2_APP_SECRET: process.env.REACT_APP_TWITTER_V2_APP_SECRET,
  GG_APP_ID: process.env.REACT_APP_GG_APP_ID,
};

export default config;

Usage

Installation:

To install the [reactjs-social-login] library, you can use the following npm command:

npm install reactjs-social-login

Here's an example of how to use the ArtheraLoginSDK in your React components:

LoginPage.js

import React, { useState, useEffect, useCallback } from 'react';
import { useLocation } from 'react-router-dom';
import LoginService from '../services/LoginService';

const LoginPage = () => {
  const location = useLocation();
  const [provider, setProvider] = useState('');
  const [profile, setProfile] = useState(location.state?.userData || null);
  const loginService = new LoginService();

  // ...

  return (
    <>
      {provider && profile ? (
        <User provider={provider} profile={profile} onLogout={onLogoutSuccess} />
      ) : (
        <div className='mt-8 flex justify-content-center'>
          <div className='card' style={{ width: 'fit-content' }}>
            {/* Login buttons */}
          </div>
        </div>
      )}
    </>
  );
};

export default LoginPage;

AuthPage.js

import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import LoginService from '../services/LoginService';

const AuthPage = () => {
  const navigate = useNavigate();
  const loginService = new LoginService(navigate);

  useEffect(() => {
    handleLogin();
  }, [navigate]);

  // ...

  return (
    <div>
      <h1>Auth</h1>
      {/* Your logic here */}
    </div>
  );
};

export default AuthPage;

API Methods

constructor()

Initializes a new instance of the ArtheraLoginSDK class.

isLoggedIn()

Checks if the user is currently logged in.

Returns:

• boolean: true if the user is logged in, false otherwise.

loginWithMicrosoft(token, id)

Logs in the user using Microsoft authentication.

Parameters:

• token (string): The Microsoft access token.

• id (string): The user's Microsoft ID.

loginWithGithub(code, user)

Logs in the user using GitHub authentication. Parameters:

• code (string): The GitHub authorization code.
• user (object): The GitHub user object.

loginWithTwitter(token, user)

Logs in the user using Twitter authentication.

Parameters:

• token (string): The Twitter access token.
• user (object): The Twitter user object.

loginWithGoogle(token, sub)

Logs in the user using Google authentication.

Parameters:

• token (string): The Google access token.
• sub (string): The user's Google sub (unique identifier).

getAddress()

Retrieves the user's wallet address.

Returns:

• Promise<string>: A promise that resolves to the user's wallet address.

getProvider()

Retrieves the user's provider.

Returns:

• JsonRpcProvider: The user's provider.

logout()

Logs out the user and clears the session data.

handleLogin()

Handles the login process based on the provided authorization code and state.

generateCodeVerifierAndChallenge()

Generates a code verifier and code challenge for the OAuth2 authorization code flow.

Returns:

• object: An object containing the codeVerifier and codeChallenge.

fetchGoogleUserInfo(accessToken)

Fetches the user's Google profile information using the provided access token.

Parameters:

• accessToken (string): The Google access token.

Returns:

• Promise<object>: A promise that resolves to the user's Google profile information.

LoginSocialTwitter Component

The LoginSocialTwitter component is a reusable component that handles the Twitter login process. It opens a popup window for the user to authenticate with Twitter and retrieves the authorization code.

Props

• client_id (string, required): The Twitter client ID.
• className (string, optional): Additional CSS class name for the component. Default is an empty string.
• redirect_uri (string, required): The redirect URI for the Twitter authentication.
• children (node, optional): The child elements to be rendered inside the component.
• fields (string, optional): The fields to be included in the Twitter user object. Default is 'created_at,description,entities,id,location,name,pinned_tweet_id,profile_image_url,protected,public_metrics,url,username,verified,withheld'.
• state (string, optional): The state parameter for the Twitter authentication. Default is 'state'.
• scope (string, optional): The scope parameter for the Twitter authentication. Default is 'users.read%20tweet.read'.
• isOnlyGetCode (boolean, optional): Flag to indicate if only the authorization code should be retrieved. Default is false.
• isOnlyGetToken (boolean, optional): Flag to indicate if only the access token should be retrieved. Default is false.
• onLoginStart (function, optional): Callback function to be called when the login process starts.
• onReject (function, optional): Callback function to be called when the login process is rejected.
• onResolve (function, optional): Callback function to be called when the login process is resolved.
• code_challenge (string, optional): The code challenge for the OAuth2 authorization code flow. Default is 'challenge'.
• code_challenge_method (string, optional): The code challenge method for the OAuth2 authorization code flow. Default is 'plain'.

Usage

import { createLoginSocialTwitter } from 'arthera-login-react-sdk';

const loginSocialTwitter = createLoginSocialTwitter({
  client_id: 'your_client_id',
  redirect_uri: 'your_redirect_uri',
  // other configuration options
});

// Start the login process
loginSocialTwitter.onLogin();

// Check if the login is completed
loginSocialTwitter.checkLoginCompletion();

In this example, the LoginSocialTwitter component is used with the required client_id and redirect_uri props. The onLoginStart, onReject, and onResolve callbacks are provided to handle the different stages of the login process. The child element <button>Login with Twitter</button> is rendered inside the component.

These are the main methods provided by the ArtheraLoginSDK class. You can use these methods to handle user authentication, retrieve user information, and manage the login process in your React application.

For more detailed usage examples, refer to the LoginPage.js, AuthPage.js, and LoginSocialTwitter.js components provided in the code snippets.