npm package: @jrstudio/auth-core-legacy
Description: Arcana Auth SDK to build end-user login / signup for dApps easily, using popular Social Authentication: Google, Twitter, Discord, Twitch, Reddit and GitHub.
Author: makyl
Latest version: 1.0.0-beta.16

<p align="center">
<a href="#start"><img height="30rem" src="https://raw.githubusercontent.com/arcana-network/branding/main/an_logo_light_temp.png"></a>
<h2 align="center"> <a href="https://arcana.network/">Arcana Auth-Core SDK </a></h2>
</p>
<br>
<p id="banner" align="center">
<br>
<a title="License MIT" href="https://github.com/arcana-network/license/blob/main/LICENSE.md"><img src="https://img.shields.io/badge/License-MIT-purple"></a>
<a title="Beta release" href="https://github.com/arcana-network/auth-core/releases"><img src="https://img.shields.io/github/v/release/arcana-network/auth-core?style=flat-square&color=28A745"></a>
<a title="Twitter" href="https://twitter.com/ArcanaNetwork"><img alt="Twitter" src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Ftwitter.com%2Farcananetwork"></a>
</p><p id="start" align="center">
<a href="https://docs.arcana.network/"><img src="https://raw.githubusercontent.com/arcana-network/branding/main/an_banner_docs.png" alt="Arcana Auth-Core SDK"></a>
</p>

# Auth-Core SDK

Auth-Core SDK enables basic functionality for onboarding users to Web3 apps via social login. It uses the Arcana Keystore APIs to interact with the distributed key generation subsystem in the Arcana Network.

The [Arcana Auth product](https://github.com/arcana-network/auth) is built using the Auth-Core SDK and the [Arcana wallet UI](https://github.com/arcana-network/wallet-ui). It ensures that only authenticated users have access to the private keys for signing blockchain transactions. With Arcana Auth, the app developers cannot access the user's private keys.

Web3 apps that choose to integrate directly with the Auth-Core SDK instead of using Arcana Auth must implement some of the functionality related to handling user authentication via social login. In addition, developers must ensure the security and privacy of the user's keys. See the [Usage section](#usage) below for details.

Note that the 'Global Keys' and enhanced wallet security 'MFA' features available via Arcana Auth are **not** available through the Auth-Core SDK.

## Installation

### npm

```sh
npm install --save @arcana/auth-core
```

### yarn

```sh
yarn add @arcana/auth-core
```

### CDN

```html
<script src="https://cdn.jsdelivr.net/npm/@arcana/auth-core"></script>
```

```html
<script src="https://unpkg.com/@arcana/auth-core"></script>
```

## Usage

### Import

```js
const { AuthProvider, SocialLoginType } = window.arcana.auth_core;
// or
import { AuthProvider } from '@arcana/auth-core';
```

### Initialize `AuthProvider`

Auth-Core SDK `AuthProvider` can be initialized for a UI flow that uses a pop-up modal within the current app context or redirects to a different app page after login.

```js
const auth = await AuthProvider.init({
   appId: `${appId}`,
   flow: 'redirect', /* can be 'popup' or 'redirect' */
   redirectUri:''    /* can be ignored for redirect flow if same as login page */
});
```

### Initiate Social Login

```js
await auth.loginWithSocial(SocialLoginType.google);
```

### Initiate Passwordless Login

```js
const result = await auth.loginWithOtp(`${emailAddress}`, PasswordlessOptions);
```

PasswordlessOptions:

- `{ withUI: true }` - the user is redirected to `email-sent` or `error` page
- `{ withUI: false }` - the Social / Passwordless login API returns  a `json` response back with no redirection
- defaults to `{ withUI: true }`

### Get Login Status

```js
const loggedIn = auth.isLoggedIn(); /* boolean response */
```

### Get User Info

After successful login, the user information is saved in memory. Before the page `unload` event, the user information gets stored in `session-storage`. After a successful page reload, it is fetched again to memory and removed from the `session-storage`.

```js
const userInfo = auth.getUserInfo();
/* 
  UserInfo: {
    loginType: 'google',
    userInfo: {
      id: 'abc@example.com',
      name: 'ABC DEF',
      email: '',
      picture: ''
    },
    privateKey: ''
  }
*/
```

For userInfo type details, see [Exported Types](#exported-types).

### Get Public Key

```js
const publicKey = await auth.getPublicKey({
  verifier: SocialLoginType.google,
  id: `${email}`,
}, PublickeyOutput); 
```

For details regarding `SocialLoginType` and `PublickeyOutput`, see [Exported Enums](#exported-enums).

### Clear Login Session

```js
await auth.logout();
```

## TypeScript Usage

### Exported Enums

```ts

enum PublicKeyOutput {
  point = 'point',
  compressed = 'compressed',
  uncompressed = 'uncompressed',
}

Regarding PublicKeyOutput:

- value can be 'point', 'compressed' or 'uncompressed'
- `point` output will be an object with `{ x: string, y: string }`
- `compressed` output will be a `string` like `0x03...`
- `uncompressed` output will be a `string` like `0x04...`
- defaults to `uncompressed`

enum SocialLoginType {
  google = 'google',
  discord = 'discord',
  twitch = 'twitch',
  github = 'github',
  twitter = 'twitter',
  passwordless = 'passwordless',
}

```

### Exported Types

```ts

interface KeystoreInput {
  id: string;
  verifier: LoginType;
}

interface InitParams {
  appId: string;
  network?: 'dev' | 'testnet'; /* defaults to testnet  */
  flow?: 'popup' | 'redirect'; /* defaults to redirect */
  debug?: boolean;             /* defaults to false    */
}

interface GetInfoOutput {
  loginType: SocialLoginType;
  userInfo: UserInfo {
    id: string;
    email?: string;
    name?: string;
    picture?: string;
  };
  privateKey: string;
}

interface PasswordlessOptions {
  withUI?: boolean;
}

```

## Flow Modes

### Redirect

`login.js`

```js
window.onload = async () => {
  const auth = await AuthProvider.init({
    appId: `${appId}`,
    flow: 'redirect',
    redirectUri:'path/to/redirect' 
  });

  googleLoginBtn.addEventListener('click', async () => {
    await auth.loginWithSocial(SocialLoginType.google);
  });
}
```

`redirect.js`

```js
window.onload = async () => {
  const auth = await AuthProvider.init({
    appId: `${appId}`,
    flow: 'redirect',
    redirectUri:'path/to/redirect' 
  });

  
  if(auth.isLoggedIn()) {
    const info = auth.getUserInfo();
  }
}
```

- Skip `redirectUri` in params if the value is the same as the login page. For example:
  
  `index.js`

  ```js
  window.onload = async () => {
    const auth = await AuthProvider.init({
      appId: `${appId}`,
      flow: 'redirect',
    });

    if(auth.isLoggedIn()) {
      /* already logged in, get user info and use */
      const info = auth.getUserInfo();
    } else {
      /* add handler to handle login function */
      googleLoginBtn.addEventListener('click', async () => {
        await auth.loginWithSocial(SocialLoginType.google);
      });
    }
  }
  ```

### Popup

`login.js`

```js
window.onload = async () => {
  const auth = await AuthProvider.init({
    appId: `${appId}`,
    redirectUri:'path/to/redirect' 
  });

  googleLoginBtn.addEventListener('click', async () => {
    await auth.loginWithSocial(SocialLoginType.google);
    if(auth.isLoggedIn()) {
      const info = auth.getUserInfo();
      // Store info and redirect accordingly
    }
  });
}
```

`redirect.js`

```js
window.onload = async () => {
  AuthProvider.handleRedirectPage(<origin>);
};
```

### Variables

- `origin` - Base URL of the app.

## 💡 Support

For any support or integration-related queries, contact the [Arcana support team](mailto:support@arcana.network).

## ℹ️ License

Arcana Auth SDK is distributed under the [MIT License](https://fossa.com/blog/open-source-licenses-101-mit-license/). For details see [Arcana License](https://github.com/arcana-network/license/blob/main/LICENSE.md).