# 📖 Docs
Arcana Network provides two SDKs, the Chain Abstraction (CA) SDK and the Auth SDK. The CA SDK resolves liquidity fragmentation. It enables developers to let users spend a unified token balance across chains without bridging assets. The Auth SDK addresses account abstraction. It allows users to onboard via social login, skipping wallet creation. Both improve user experience and onboarding. Arcana also offers a standalone CA wallet for spending unified balances on select Web3 apps.
# Chain Abstraction
# Unify Balance Across Chains
Let users spend crypto on any blockchain instantly - no chain switching, no bridges, no hassle.
Integrate Web3 app with the Arcana's [Chain Abstraction](concepts/ca/chain-abstraction/) (CA) SDK. Enable app users to access [unified balance](concepts/ca/unified-balance/) from all chains in one place.
**TL;DR** | [Install](ca/ca-sdk-installation/) | [Quick Start](#quick-start) | [Examples](ca/examples/) | [Usage](ca/ca-usage-guide/)
Arcana's Chain Abstraction
## Why Chain Abstraction?
A user must cross several hoops to issue a blockchain transaction on a new chain where the user does not have any assets yet.
Chain Abstraction eliminates the need to bridge or convert tokens between blockchains. With Arcana's solution, users can spend their combined balance from any chain directly within your app - no switching networks, no extra steps.
The table below illustrates these steps when not using chain abstraction. With chain abstraction, the user experience is much simpler with a single-click transaction.
| UX: Transact on New Chain | No CA: Complex, Multi-step UX | With CA: One-step UX | | --- | --- | --- | | Figure out which chain your app runs on | | | | Hunt for the best bridge to move assets | | | | Fund gas tokens on different chains | | | | Track and transfer balances across chains | | | | Issue a transaction on a new chain | | |
[Learn more...](https://blog.arcana.network/)
Arcana Chain Abstraction UX
## Quick Start
[Web Apps](quick-start/ca-quick-start/) [Wagmi Apps](quick-start/ca-wagmi-quick-start/)
[### Try Now](https://codesandbox.io/p/github/arcana-network/ca-wagmi-example)
## Why Arcana?
Arcana’s Chain Abstraction SDK can integrate with Web3 apps and enable unified balance for the app users. Unified balance allows users to spend the consolidated multi-chain balance of supported [tokens](web3-stack/ca_stack/#tokens) (for example, ETH, USDC, USDT) within the app context on any [chain](web3-stack/ca_stack/#chains). This allows Web3 apps to onboard users from any ecosystem effortlessly.
- **Unified Balance**
______________________________________________________________________
Display users' consolidated balance across chains. Use Arcana’s plug-and-play UI or design your own.
- **Flexible Gas Payments**
______________________________________________________________________
Users can pay gas fees in USDC or USDT if they do not have native gas tokens.
- **Larger Transactions**
______________________________________________________________________
Users can seamlessly access and spend their entire multi-chain balance on the desired chain, in a single click.
- **No Lock-In**
______________________________________________________________________
All assets are in user's custody, no compulsion to rely on Arcana for accessing funds. Users can freely spend their assets on any app.
- **Frontend Code Updates**
______________________________________________________________________
Requires **minimal** changes to the Web3 app's front-end code.
- **No Smart Contract Changes**
______________________________________________________________________
Requires **zero** migration or updates to Web3 app's smart contracts.
- **Bring Existing Wallets**
______________________________________________________________________
Users can bring their existing EOA wallets such as MetaMask, Rabby, Rainbow, etc.
- **Assets: Zero Lockups or Transfers**
______________________________________________________________________
Users do not need to transfer their funds to a new wallet address or lockup in a smart contract.
Spend crypto on any blockchain instantly - no chain switching, no bridges, no hassle.
To enjoy [unified balance](concepts/ca/unified-balance/) Web3 users have two options:
1. Log in to an app integrated with Arcana's' Chain Abstraction SDK and connect any third-party browser-based wallet to view unified balance and sign transactions. For example, the [CA SDK demo app](https://sdk.arcana.network).
Arcana CA SDK Demo App: Unified Balance
1. [Download](https://chromewebstore.google.com/detail/arcana-wallet/nieddmedbnibfkfokcionggafcmcgkpi) Arcana's' standalone CA Wallet browser extension to view unified balance across supported [chains](web3-stack/ca_stack/#chains) and [tokens](web3-stack/ca_stack/#tokens). This wallet is made available for demonstrating the [chain abstraction](concepts/ca/chain-abstraction/) solution and unified balance feature in the context of **only some of the popular** [Web3 apps](web3-stack/ca_stack/#apps).
Arcana CA Wallet
See wallet [Help](https://arcananetwork.notion.site/Help-Content-127f11ed0804805fba4dc72ad3f8cdb2) and [FAQ](https://arcananetwork.notion.site/Frequently-Asked-Questions-128f11ed080480ed8679d90e4bb0b96d) resources for details.
## Need Help?
📨 [Email Arcana Support](mailto:support@arcana.network)
✅ Be a part of the [Arcana Community](support/). Stay informed about the new upcoming SDK capabilities and usage examples.
# Chain Abstraction Architecture
Before we get into the details of Arcana's Chain Abstraction (CA) architecture, let's first understand some key concepts.
## What is CA?
For Web3 app users, managing multiple chains, tokens, and accounts often leads to liquidity fragmentation in their wallets. Even with sufficient overall token asset balance, users struggle to transact because funds are scattered across several chains. To transact, users must convert assets from two or more source chains into those accepted on the target chain. This is a complex, time-consuming process not everyone can navigate.
Chain Abstraction lets users view and access a [unified balance](../../../concepts/ca/unified-balance/) across chains associated with their wallet account, enabling them to transact on any chain. It shifts the focus from having to bootstrap funds to transact on the destination chain to **specifying a clear intent** for the transaction. This simplifies the transaction process and makes it accessible to a wider audience.
Arcana's Chain Abstraction
## Unified balance
Unified balance shows all the liquidity in a user's EoA account across multiple chains in one view. It lets users transact seamlessly on any chain without needing bridges or pre-provisioning gas for token swaps.
For instance, let us take the case where a user has 0 USDC , 4 ETH on Optimism, 10 USDC on Arbitrum, and 15 USDC on Base but intends to send 16 USDC on Optimism. This would typically require multiple clicks and steps including swapping or bridging assets available on the source chains to get the tokens required for spending on the destination chain. With chain abstraction, user can view the unified token balance across Arbitrum, Base and just sign the intent to send 16 USDC on Optimism.
Chain abstraction handles all the complexity involved in multi-chain transaction while enabling better UX through a single intent approval.
Single chain liquidity vs. Unified Balance with Chain Abstraction
### Wagmi Plug & Play Widget
Arcana CA Wagmi SDK provides a plug and play widget that displays the [Unified balance](../../../concepts/ca/unified-balance/) associated with the user's wallet address. This widget is available only for the [Wagmi](https://wagmi.sh/) apps.
Follow these steps to use this widget:
1. Install and integrate the app with the Arcana CA SDK.
1. Use `CAProvider` to enable the plug-and-play unified balance widget in the app. [Learn more...](../../../quick-start/ca-wagmi-quick-start/)
Plug & Play Unified Balance Widget
## Allowance
Allowances help activate the Chain Abstraction (CA) feature offered by the Arcana Network. They let Web3 users unlock fragmented liquidity across source chains and spend it on any destination chain, even when they lack sufficient balance there.
With a unified balance on the source chains, users can request funds on the destination chain. By setting up allowances, users permit Arcana Vault contracts on the source chains to collect the funds required to execute the transaction seamlessly on the destination chain.
Allowances can be set up anytime before a multi-chain transaction is initiated by the user.
## Benefits
Chain abstraction and unified balances simplify and streamline Web3 transactions by offering:
- **Lower Complexity:** Users specify their desired outcome and maximum price. Behind the scenes, solvers handle swaps, conversions, and routing securely and transparently.
- **Unified Liquidity:** Users see a consolidated view of their assets across all chains without needing manual bridges or swaps.
- **Simplified UX:** It eliminates the technical and time-consuming multi-step hurdles, creating a seamless experience for both experts and casual users by eliminating the clutter between user expectation and reality of blockchain ecosystem.
- **Streamlined DX:** Developers can enable unified balances in dApps without altering existing stacks. With the Arcana Chain Abstraction SDK, they can integrate seamlessly—no need to write smart contracts or manage chain switching for transactions on new chains.
## Arcana CA Offerings
Arcana has two CA offerings, one targeted at the Web3 Users and the other for Web3 builders and developers.
- Web Apps: Arcana CA SDK
- Wagmi Apps: Arcana CA Wagmi SDK
- Arcana Wallet (Standalone)
## Architecture
Arcana's [Chain Abstraction (CA)](../../../concepts/ca/chain-abstraction/) protocol manages balances across multiple chains and tokens in Web3 apps. It solves liquidity fragmentation by enabling a unified balance across supported chains. The Arcana Vault smart contracts on each supported chain and the solver ecosystem are two key parts of the Arcana CA protocol. There’s no auction; it’s a first-come, first-served system where the first solver to accept an intent gets to fulfill it.
The user's EoA state and intents are managed across multiple chains. Approved intents are published for 'solvers' to fulfill. Solvers compete to fulfill these intents and provide liquidity on the destination chain. The protocol handles state transitions and settles solver payments using transaction netting.
How Arcana CA Works
## CA Protocol
1. Developer sets up Arcana Chain Abstraction settings enabling cross chain transactions on selected chain types and required [allowances](../../../concepts/ca/allowances/).
1. App users are required to permit the allowance values or reconfigure them if the app allows. Allowances enable Arcana Vault to collect required funds from the EoA account on one or more source chains, as per the user's intent.
1. User submits an intent to spend `n` tokens on a destination chain Y and transact via a Web3 app.
1. Arcana verifies that user has sufficient funds across the source chains in the user's EoA account and adequate allowances are pre-configured to enable chain abstraction, pay gas fees.
1. Funds are moved to the Arcana Vault and user's intent is announced to all listening solvers.
1. The assumption is that one of the available solvers in the system will agree to service the user's intent. As of today, only Arcana solver is supported. We are working with partners to onboard trusted third-party solvers into the ecosystem.
1. Once the solver services the intent and provides the necessary liquidity on the desired destination chain into the user's EoA, the user can instantly spend it.
1. Arcana takes care of managing the settlement at the agreed upon periodicity with the successful solvers. The settlement does not happen after every user transaction but after netting and verification process.
1. In case a transaction fails, or times out waiting for a solver, user's funds deposited from the source chain are refunded within a stipulated time period after verification.
## Arcana CA SDKs
Developers can enable [unified balance](../../../concepts/ca/unified-balance/) in any dApp by installing and integrating it with the appropriate Arcana [CA SDK flavor as per the app type](../../ca-sdk-installation/).
Unified balance is supported across the following chains and tokens. We are actively working on adding support to enable unified balance across newer chains and tokens.
### CA SDK: Supported Chains
- Arbitrum
- Base
- Ethereum
- Linea
- Optimism
- Polygon
- Scroll
### CA SDK: Supported Tokens
- ETH
- USDC
- USDT
## Arcana CA Wallet (Standalone)
Besides the SDK, we offer a standalone Arcana Wallet with **Chain Abstraction** [download here](https://chromewebstore.google.com/detail/arcana-wallet/nieddmedbnibfkfokcionggafcmcgkpi). This wallet supports [unified balance](../../../concepts/ca/unified-balance/) across many chains and tokens. Refer to the supported chains and tokens list below.
Currently, it works with a limited set of Web3 apps. We are actively working to expand app support in our CA wallet.
### CA Wallet: Supported Apps
- Aave
- CowSwap
- Galaxy Platform
- Griffy
- Hyperliquid
- Jumper
- Polymarket
- Renzo
- Uniswap
### CA Wallet: Supported Chains
- Arbitrum
- Base
- Ethereum
- Fuel
- Linea
- Optimism
- Polygon
- Scroll
### CA Wallet: Supported Tokens
- ETH
- USDC
- USDT
Arcana's Chain Abstraction is designed for onboarding users across a wide range of applications, but it is particularly impactful for DeFi applications that depend on deposits in stablecoins like USDC or USDT, as well as native tokens like ETH.
Benefits
- Remove friction of bridging with a unified multi-chain balance
- Larger transaction values
- Launch apps on emerging chains while onboarding users from established ecosystems
## Swaps
Allow users to execute token swaps on a single chain DEX while using funds held across multiple chains as a unified balance. For example, a user holding USDTC on Ethereum and Arbitrum can seamlessly swap tokens on Polygon without needing to bridge or consolidate assets manually. This removes friction for users, ensuring smoother transactions and higher conversion rates for swap protocols.
## Bridges
Bridges enable users to move funds from Chain A to Chain B, but when users hold assets across multiple chains, they face the challenge of tracking and transferring funds chain by chain. With Arcana’s Chain Abstraction, users can bridge their entire multi-chain balance to the desired chain in one step.
Example
User holds USDC on Ethereum, Polygon, and Optimism and wants to consolidate their funds on Arbitrum. Instead of manually bridging USDC from each chain one at a time, users can bridge their total USDC balance from all three chains to Arbitrum in a single step.
## Decentralized Exchanges (DEXes)
For liquidity providers and traders, fragmented funds across chains often hinder participation in DEXes. With Arcana, users can trade or provide liquidity on a single-chain DEX (for example, Optimism) using their unified balance from multiple chains, such as Ethereum, Polygon, and Arbitrum. This enables more efficient capital utilization, increases trading volumes, and expands access to liquidity for DEX platforms.
## Perpetuals Trading
For protocols that need users to deposit stable coins to a particular address on a specific chain (for example, Hyperliquid on Arbitrum) Arcana’s Chain Abstraction allows users to trade on a perpetual protocol on one chain, like Base, using a unified balance of funds held on Ethereum, Polygon, or other chains. This removes the need for manual bridging and ensures traders can respond quickly to market changes without delays in fund transfers.
## Prediction Markets
Prediction markets often have strong user bases tied to specific chains. Arcana’s Chain Abstraction allows users to stake or wager assets on a prediction market hosted on a single chain (for example, Polymarket on Polygon) using funds held across multiple chains. For instance, a user can use their combined stablecoin holdings from Ethereum and Polygon to place a bet on Polygon, ensuring greater cross-chain participation and deeper liquidity for these markets.
## Lending
Borrowers and lenders often face challenges when their assets are distributed across chains and they want to access new yield products on specific chains. With Arcana, a user can supply liquidity to a lending protocol on one chain, such as Ethereum, using their unified balance aggregated from other chains like Optimism and Base.
This leads to larger deposit and borrow transactions with the access to a larger pool of capital.
## Staking/Restaking
Restaking requires users to bring assets or derivatives to specific chains. Arcana enables users to stake or restake assets on a protocol running on a single chain (for example, Polygon) by leveraging their unified balance across multiple chains. For instance, a user with ETH on Ethereum and Arbitrum can stake and restake seamlessly on another chain without manual transfers.
This allows users from multiple EVM ecosystems to participate in the protocol.
*Stay tuned, Arcana is actively working on supporting additional use cases with the Arcana CA SDK.*
# Auth
# Web3 Made Effortless
Onboard Web3 app users via the familiar Web2 login providers, enable authenticated users to instantly access the in-app, non-custodial Arcana wallet for signing blockchain transactions.
Integrate Web3 apps with the Arcana Auth SDK to enable [social login](../concepts/social-login/).
**TL;DR** | [Setup](../setup/config-auth/register-app/) | [Install](../auth/sdk-installation/) | [Quick Start](#quick-start) | [Examples](https://github.com/arcana-network/auth-examples) | [Usage](../introduction/)
- **Social Login**
______________________________________________________________________
Enable Web2-like login in Web3 apps with Arcana Auth SDK and enable in-app Arcana wallet
[Learn More...](../concepts/social-login/)
- **Set up in 2 min!**
______________________________________________________________________
Use Arcana Developer Dashboard to register app, configure settings and manage user experience
[Configure](../setup/config-dApp-with-db/)
- **Integration Examples**
______________________________________________________________________
Get up and running quickly with these integration examples for various supported Web3 apps!
[Integration Examples](https://github.com/arcana-network/auth-examples)
- **Resources**
______________________________________________________________________
Release notes, migration guides, Dashboard Settings Guide, FAQ, integration checklists amd more!
[Resources](https://docs.arcana.network/relnotes/latest-auth-release-note/)
## Auth Playground
[### Try Now](https://codesandbox.io/p/github/shaloo/auth-sdk-example-vite-vue/main?import=true)
## Quick Start
[Wagmi](../quick-start/wagmi-quick-start/) [RainbowKit](../quick-start/rainbowkit-quick-start/) [Web3-React](../quick-start/web3-react-quick-start/) [WalletConnect](../quick-start/walletconnect-quick-start/) [HTML/CSS/JS](../quick-start/vanilla-web-apps-quick-start/) [React/NextJS](../quick-start/react-nextjs-quick-start/) [Vue](../quick-start/vue-quick-start/)
[Solana](../quick-start/solana-quick-start/) [MultiversX](../quick-start/mvx-quick-start/) [Near](../quick-start/near-quick-start/)
[React-Native](../quick-start/react-native-quick-start/) [Flutter](../quick-start/flutter-quick-start/)
[Unity](../quick-start/unity-quick-start/)
## Need Help?
📨 [Email Arcana Support](mailto:support@arcana.network)
✅ Be a part of the [Arcana Community](../support/). Stay informed about the new upcoming SDK capabilities and usage examples.
[Integration Checklist](../checklists/)
# Integrate MultiversX App
Integrate 'MultiversX' apps with [Arcana Auth SDK](../../../concepts/authsdk/) and onboard users via [social login](../../../concepts/social-login/). Enable users to sign blockchain transactions with the in-app [Arcana wallet](../../../concepts/anwallet/).
## Prerequisites
- [Register](../../../setup/config-dApp-with-db-for-mvx/) the 'MultiversX' app and configure the Arcana Auth SDK usage [settings for social login](../../../setup/) providers, manage app [manage app chains](../../../setup/config-wallet-chains/) and [wallet user experience](../../../setup/config-wallet/).
Non-EVM Chains
When registering an app through Arcana Developer Dashboard, the choice of chain type (EVM, Solana, MultiversX, Near) is final. App developers can't change it later. They can switch the default chain within the same type. For example, a Solana app on Testnet can switch to Solana Mainnet or Solana Dev but not to MultiversX or an EVM chain.
MultiversX Shard Selection
MultiversX uses [adaptive state sharding](https://docs.multiversx.com/technology/adaptive-state-sharding/) for horizontal scaling. Shards allow it to process far more transactions through parallelization, improving transaction throughput and efficiency.
Choose your shard once when registering a MultiversX app on the Arcana Developer Dashboard. It cannot be changed later.
By default, Arcana uses 'Shard 0' to deploy all app contracts and allocate wallet addresses for users. The benefit is that when addresses from the same shard interact with contracts on the same shard, latencies are much lower than in cross-shard interactions.
## 1. Install
Depending upon the [app type](../../../web3-stack/apps/), you may need to [install one or more Arcana Auth SDK flavors](../../sdk-installation/) and the integration steps may vary.
## 2. Integrate App
Select your 'MultiversX' app type and follow the integration instructions.
[HTML/CSS/JS App](../vanilla-html-css-js/) [React/Next.js App](../react-nextjs/) [Wagmi App](../wagmi/) [WalletConnect App](../walletconnect/) [RainbowKit App](../rainbow/) [Web3-React App](../web3-react/) [Unity App](../unity/)
[Flutter Apps](../../mobile/flutter-get-started/) [React-Native Apps](../../mobile/react-native-get-started/)
[Custom Auth](../../custom-auth/)
## What's Next?
Add code to [onboard users](../../onboard/mvx/). Use `AuthProvider`, the standard EIP-1193 Web3 provider to call support JSON/RPC functions and Web3 wallet operations. [Learn more...](../../web3-ops/mvx/)
## See also
**'MultiversX'** integration example: See `sample-auth-multiversx` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
- [MultiversX FAQ](../../../faq/faq-mvx/)
[Try Demo App](https://demo.arcana.network)
# Integrate Near App
Integrate 'Near' apps with [Arcana Auth SDK](../../../concepts/authsdk/) and onboard users via [social login](../../../concepts/social-login/). Enable users to sign blockchain transactions with the in-app [Arcana wallet](../../../concepts/anwallet/).
## Prerequisites
- [Register](../../../setup/config-dApp-with-db-for-near/) the 'Near' app and configure Arcana Auth SDK SDK usage [settings for social login](../../../setup/) providers, manage app [manage app chains](../../../setup/config-wallet-chains/) and [wallet user experience](../../../setup/config-wallet/).
Non-EVM Chains
When registering an app through Arcana Developer Dashboard, the choice of chain type (EVM, Solana, MultiversX, Near) is final. App developers can't change it later. They can switch the default chain within the same type. For example, a Solana app on Testnet can switch to Solana Mainnet or Solana Dev but not to MultiversX or an EVM chain.
## 1. Install
Depending upon the [app type](../../../web3-stack/apps/), you may need to [install one or more Arcana Auth SDK SDK flavors](../../sdk-installation/) and the integration steps may vary.
## 2. Integrate App
Select your 'Near' app type and follow the integration instructions.
[HTML/CSS/JS App](../vanilla-html-css-js/) [React/Next.js App](../react-nextjs/) [Wagmi App](../wagmi/) [WalletConnect App](../walletconnect/) [RainbowKit App](../rainbow/) [Web3-React App](../web3-react/) [Unity App](../unity/)
[Flutter Apps](../../mobile/flutter-get-started/) [React-Native Apps](../../mobile/react-native-get-started/)
[Custom Auth](../../custom-auth/)
## What's Next?
Add code to [onboard users](../../onboard/near/). Use `AuthProvider`, the standard EIP-1193 Web3 provider to call support JSON/RPC functions and Web3 wallet operations. [Learn more...](../../web3-ops/near/)
## See also
**'Near'** integration example: See `sample-auth-near` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
- [Near FAQ](../../../faq/faq-near/)
[Try Demo App](https://demo.arcana.network)
# Integrate Rainbow App
[RainbowKit](https://www.rainbowkit.com/) allows Web3 apps to connect to multiple Web3 wallets. It relies on [Wagmi](https://wagmi.sh/) and [Viem](https://viem.sh/).
Integrate 'RainbowKit' apps with Arcana Auth SDK and onboard users via [social login](../../../concepts/social-login/). Enable users to sign blockchain transactions with the in-app [Arcana wallet](../../../concepts/anwallet/).
## Prerequisites
- [Register](../../../setup/config-auth/register-app/) the 'RainbowKit' app and configure SDK usage [settings for social login](../../../setup/) providers, manage app [manage app chains](../../../setup/config-wallet-chains/) and [wallet user experience](../../../setup/config-wallet/).
Non-EVM Chains
When registering an app through Arcana Developer Dashboard, the choice of chain type (EVM, Solana, MultiversX, Near) is final. App developers can't change it later. They can switch the default chain within the same type. For example, a Solana app on Testnet can switch to Solana Mainnet or Solana Dev but not to MultiversX or an EVM chain.
## Steps
### 1. Install
**Wagmi 2.0**
```
npm install --save @arcana/auth-wagmi@3.0.0 @arcana/auth@1.0.11
```
**Wagmi 1.0**
```
npm install --save @arcana/auth-wagmi@2.0.0 @arcana/auth
```
**Wagmi 2.0**
```
yarn add @arcana/auth-wagmi@3.0.0 @arcana/auth@1.0.11
```
**Wagmi 1.0**
```
yarn add @arcana/auth-wagmi@2.0.0 @arcana/auth
```
### 2. Create `AuthProvider` & `ArcanaConnector`
```
import { AuthProvider } from "@arcana/auth";
import { ArcanaConnector } from "@arcana/auth-wagmi"
const auth = new AuthProvider('your-client-id');
const connector = new ArcanaConnector({ auth });
```
`AuthProvider` Optional Parameters
Besides Client ID input parameter, you can optionally customize these settings in the `AuthProvider` constructor:
______________________________________________________________________
**`position`:** wallet position within the app context - `left`|`right`
**`theme`:** wallet theme - `light`|`dark`
**`connectOptions`:** [compact mode](../../../concepts/plug-and-play-auth/#compact-modal) for the built-in plug-and-play login UI - `true`|`false`
```
connectOptions: {
compact: true // default - false
},
```
______________________________________________________________________
See [`AuthProvider` constructor parameters](https://authsdk-ref-guide.netlify.app/interfaces/constructorparams) for details.
Compact Mode
While creating the `AuthProvider`, you can choose the [compact mode (optional)](../../../concepts/plug-and-play-auth/#compact-modal) for the plug-and-play login UI.
### 3. Create `ArcanaRainbowConnector`
Initialize the `connectorsForWallets` in the RainbowKit with the `ArcanaRainbowConnector`.
```
//This example uses Arcana Rainbow connector and MetaMask
import { connectorsForWallets } from "@rainbow-me/rainbowkit";
import { metaMaskWallet } from "@rainbow-me/rainbowkit/wallets";
import { getAuthProvider } from "./getArcanaAuth";
import { ArcanaConnector } from "@arcana/auth-wagmi";
import { sequenceLogo } from "./logo";
export const ArcanaRainbowConnector = ({ chains }) => {
return {
id: "arcana-auth",
name: "Login with Email/Social",
iconUrl: sequenceLogo,
iconBackground: "#101010",
createConnector: () => {
const connector = new ArcanaConnector({
chains,
options: {
auth: getAuthProvider()
}
});
return {
connector
};
}
};
};
const connectors = (chains) =>
connectorsForWallets([
{
groupName: "Recommended",
wallets: [ArcanaRainbowConnector({ chains }), metaMaskWallet({ chains })]
}
]);
export { connectors };
```
Use the `ArcanaRainbowConnector` and set up `WagmiConfig`.
```
// Note:
// This sample code is for
// wagmi versions 1.x.x and auth-wagmi 2.0.0
import { configureChains, createConfig, WagmiConfig } from "wagmi";
import { polygon, mainnet, optimism, arbitrum } from "wagmi/chains";
import { publicProvider } from "wagmi/providers/public";
import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { connectors } from "./wallet";
import { useAccount, useConnect } from 'wagmi'
import { Connect } from "./Connect";
const { chains, publicClient } = configureChains(
[mainnet, polygon, optimism, arbitrum],
[publicProvider()]
);
const wagmiEntity = createConfig({
connectors: connectors(chains),
autoConnect: true,
publicClient,
});
...
```
```
// Note:
// This sample code is for
// wagmi versions <1.x.x and auth-wagmi <2.0.0
import "../styles/globals.css";
import "@rainbow-me/rainbowkit/styles.css";
import { configureChains, createClient, WagmiConfig } from "wagmi";
import { polygon, mainnet } from "wagmi/chains";
import { publicProvider } from "wagmi/providers/public";
import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { connectors } from "../utils/wallet";
const { chains, provider } = configureChains(
[mainnet, polygon],
[publicProvider()]
);
const wagmiEntity = createClient({
connectors: connectors(chains),
autoConnect: true,
provider,
});
...
```
Use the `WagmiConfig` to initialize the `RainbowKitProvider` components in the app.
```
// Pass wagmi client configured with ArcanaRainbowKitConnector to the RainbowKit Context Provider
export default function App({ Component, pageProps }) {
return (
);
}
```
```
// Pass wagmi client configured with ArcanaRainbowKitConnector to the RainbowKit Context Provider
export default function App({ Component, pageProps }) {
return (
);
}
```
The 'RainbowKit' Web3 app is now **integrated** with the Arcana Auth SDK.
## What's Next?
Onboard users via the [built-in plug-and-play login UI](../../onboard/rainbow/rainbow-pnp-ui/) or a [custom login UI](../../onboard/rainbow/rainbow-custom-ui/).
Use `AuthProvider`, the EIP-1193 provider offered by the SDK, to call supported JSON/RPC functions and [Web3 wallet operations](../../web3-ops/evm/) in the authenticated user's context.
## See also
**'RainbowKit'** integration example: See \`\`sample-auth-rainbowkit-viem`, `sample-auth-rainbowkit\` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
- [FAQ](../../../faq/faq-gen/)
- [Troubleshooting Guide](../../../troubleshooting/)
- [Arcana Auth SDK Errors](../../auth-error-msg/)
- [Arcana Auth SDK Usage Guide](../../auth-usage-guide/)
Arcana Auth SDK Quick Links
- [Arcana Auth SDK Reference](https://authsdk-ref-guide.netlify.app/)
- [Release notes](../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth)
Arcana Auth Wagmi SDK Quick Links
- [Arcana Auth Wagmi SDK Reference Guide](https://wagmi-authsdk-ref-guide.netlify.app/)
- [Release notes](../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth-wagmi/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth-wagmi)
[Try Demo App](https://demo.arcana.network)
# Integrate React/Next.js App
Integrate 'React/NextJS' apps with[Arcana Auth SDK](../../../concepts/authsdk/) and onboard users via [social login](../../../concepts/social-login/). Enable users to sign blockchain transactions with the in-app [Arcana wallet](../../../concepts/anwallet/).
## Prerequisites
- [Register](../../../setup/config-auth/register-app/) the 'React/NextJS' app and configure SDK usage [settings for social login](../../../setup/) providers, manage app [manage app chains](../../../setup/config-wallet-chains/) and [wallet user experience](../../../setup/config-wallet/).
Non-EVM Chains
When registering an app through Arcana Developer Dashboard, the choice of chain type (EVM, Solana, MultiversX, Near) is final. App developers can't change it later. They can switch the default chain within the same type. For example, a Solana app on Testnet can switch to Solana Mainnet or Solana Dev but not to MultiversX or an EVM chain.
## Steps
### 1. Install
```
npm install --save @arcana/auth
```
```
yarn add @arcana/auth
```
```
npm install --save @arcana/auth @arcana/auth-react
```
```
yarn add @arcana/auth @arcana/auth-react
```
### 2. Initialize `AuthProvider`, `ProviderAuth`
```
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { AuthProvider } from "@arcana/auth";
import { ProvideAuth } from "@arcana/auth-react";
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
const provider = new AuthProvider(
"xar_live_d7c88d9b033d100e4200d21a5c4897b896e60063"
);
root.render(
);
```
```
import React from "react";
import { Auth } from "@arcana/auth-react";
export default function App() {
return (
;
}
if (!isLoggedIn) {
return (
);
}
}
export default App
```
## What's Next?
Onboard users via the [built-in plug-and-play login UI](../../onboard/react-nextjs/use-plug-play-auth/) or a [custom login UI](../../onboard/react-nextjs/custom-ui/).
Use `AuthProvider`, the EIP-1193 provider offered by the SDK, to call supported JSON/RPC functions and [Web3 wallet operations](../../web3-ops/evm/) in the authenticated user's context.
## See also
**'React/NextJS'** integration example: See `sample-auth-react` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
- [FAQ](../../../faq/faq-gen/)
- [Troubleshooting Guide](../../../troubleshooting/)
- [Arcana Auth SDK Errors](../../auth-error-msg/)
- [Arcana Auth SDK Usage Guide](../../auth-usage-guide/)
Arcana Auth SDK Quick Links
- [Arcana Auth SDK Reference](https://authsdk-ref-guide.netlify.app/)
- [Release notes](../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth)
[Try Demo App](https://demo.arcana.network)
# Integrate Solana App
Integrate 'Solana' apps with [Arcana Auth SDK](../../../concepts/authsdk/) and onboard users via [social login](../../../concepts/social-login/). Enable users to sign blockchain transactions with the in-app [Arcana wallet](../../../concepts/anwallet/).
## Prerequisites
- [Register](../../../setup/config-dApp-with-db-for-Solana/) the 'Solana' app and configure Arcana Auth SDK SDK usage [settings for social login](../../../setup/) providers, manage app [manage app chains](../../../setup/config-wallet-chains/) and [wallet user experience](../../../setup/config-wallet/).
Non-EVM Chains
When registering an app through Arcana Developer Dashboard, the choice of chain type (EVM, Solana, MultiversX, Near) is final. App developers can't change it later. They can switch the default chain within the same type. For example, a Solana app on Testnet can switch to Solana Mainnet or Solana Dev but not to MultiversX or an EVM chain.
## Steps
Select your 'Solana' app type and follow the integration instructions. Solana apps will require to initialize and use **Solana Provider** in addition to the `AuthProvider`.
## 1. Install
Depending upon the [app type](../../../web3-stack/apps/), you may need to [install one or more Arcana Auth SDK SDK flavors](../../sdk-installation/) and the integration steps may vary.
### 2. Integrate App
Select your 'Solana' app type and follow the integration instructions.
[HTML/CSS/JS App](../vanilla-html-css-js/) [React/Next.js App](../react-nextjs/) [Wagmi App](../wagmi/) [WalletConnect App](../walletconnect/) [RainbowKit App](../rainbow/) [Web3-React App](../web3-react/) [Unity App](../unity/)
[Flutter Apps](../../mobile/flutter-get-started/) [React-Native Apps](../../mobile/react-native-get-started/)
[Custom Auth](../../custom-auth/)
## 3. Initialize Solana Provider
Solana apps can use the `auth.provider` to make standard JSON RPC calls in the context of an authenticated user.
```
const provider = auth.provider;
```
Use the Solana provider for issuing Solana Web3 wallet operations in the context of an authenticated user.
```
const solanaP = auth.solana;
```
## What's Next?
Add code to [onboard users](../../onboard/solana/). Use `AuthProvider`, the standard EIP-1193 Web3 provider to call support JSON/RPC functions and Web3 wallet operations. [Learn more...](../../web3-ops/solana/)
## See also
**'Solana'** integration example: See `sample-auth-solana` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
- [Solana FAQ](../../../faq/faq-solana/)
[Try Demo App](https://demo.arcana.network)
# Integrate Unity App
Integrate 'Unity' apps with [Arcana Auth SDK](../../../concepts/authsdk/) and onboard users via [social login](../../../concepts/social-login/). Enable users to sign blockchain transactions with the in-app [Arcana wallet](../../../concepts/anwallet/).
## Prerequisites
- [Register](../../../setup/config-dApp-with-db-for-Unity/) the 'Unity' app and configure SDK usage [settings for social login](../../../setup/) providers, manage app [manage app chains](../../../setup/config-wallet-chains/) and [wallet user experience](../../../setup/config-wallet/).
Non-EVM Chains
When registering an app through Arcana Developer Dashboard, the choice of chain type (EVM, Solana, MultiversX, Near) is final. App developers can't change it later. They can switch the default chain within the same type. For example, a Solana app on Testnet can switch to Solana Mainnet or Solana Dev but not to MultiversX or an EVM chain.
## Steps
### 1. Setup
#### Setup Unity
- Install [NuGetForUnity](https://github.com/GlitchEnzo/NuGetForUnity).
- In the NuGet Toolbar at the top, click **NuGet > Manage NuGet packages**.
Manage NuGet Packages
- Install the following packages by STA: `Nethereum.Web3`, `WebsocketSharp.Core`
- Use the Unity Editor Project Settings window to edit package settings for your project. Click **Edit > Project Settings > Package Manager**.
- [Edit Project Settings](https://docs.unity3d.com/Manual/class-PackageManager.html) with URL **https://npm-registry.arcana.network/** and set the scope to `com.cysharp.unitask, dev.voltstro`
Edit Project Settings
- Add another new scoped registry with URL **https://unitynuget-registry.azurewebsites.net** and set the scope to `org.nuget`.
Add Scoped Registry
- In the NuGet window, use the NuGet Toolbar at the top, and click **Window > Package Manager > Add Package by Name**.
Add Package by Name
- Add the following packages: `com.cysharp.unitask`, \`\`dev.voltstro.unitywebbrowser.engine.cef\`
- **Windows**: `dev.voltstro.unitywebbrowser.engine.cef.win.x64`
- **Linux**: `dev.voltstro.unitywebbrowser.engine.cef.linux.x64`
- **MacOS**: `dev.voltstro.unitywebbrowser.engine.cef.macos.x64`
See [Unity Web Browser package list](https://projects.voltstro.dev/UnityWebBrowser/latest/articles/user/packages/#package-list) for details.
- Download the Arcana Auth Unity SDK package: [https://npm-registry.arcana.network/](https://npm-registry.arcana.network/-/web/detail/arcana-auth-sdk). Unzip the contents and copy them to the **Assets** folder of the Unity Project.
- Search for **ArcanaSDK** prefab in the 'Project Window' of the Unity Editor. Click **Assets > ArcanaSDK > Prefabs > ArcanaSDK**. Drag this prefab into the project 'Hierarchy' and configure the prefab as shown here:
Configure Arcana Prefab
#### Install Auth SDK
```
npm install --save @arcana/auth
```
```
yarn add @arcana/auth
```
### 2. Initialize Auth SDK
```
using ArcanaSDK;
await arcanaSDK.InitializeSDK(env, "unique_clientID_for_registed_app");
```
## What's Next?
After integrating an app with the Arcana Auth Unity SDK, developers can add code to [onboard users](../../onboard/unity/) and [enable Web3 wallet operations](../../web3-ops/unity-wallet-ops/) for authenticated users to sign transactions.
## See also
**'Unity'** integration example: See `sample-auth-unity` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
[Try Demo App](https://demo.arcana.network)
# Integrate HTML/CSS/JS App
Integrate 'HTML/CSS/JS' apps with[Arcana Auth SDK](../../../concepts/authsdk/) and onboard users via [social login](../../../concepts/social-login/). Enable users to sign blockchain transactions with the in-app [Arcana wallet](../../../concepts/anwallet/).
## Prerequisites
- [Register](../../../setup/config-auth/register-app/) the 'HTML/CSS/JS' app and configure SDK usage [settings for social login](../../../setup/) providers, manage app [manage app chains](../../../setup/config-wallet-chains/) and [wallet user experience](../../../setup/config-wallet/).
Non-EVM Chains
When registering an app through Arcana Developer Dashboard, the choice of chain type (EVM, Solana, MultiversX, Near) is final. App developers can't change it later. They can switch the default chain within the same type. For example, a Solana app on Testnet can switch to Solana Mainnet or Solana Dev but not to MultiversX or an EVM chain.
## Steps
### 1. Install
```
npm install --save @arcana/auth
```
```
yarn add @arcana/auth
```
### 2. Initialize `AuthProvider`
```
import { AuthProvider } from '@arcana/auth'
```
```
const auth = new AuthProvider(
"xar_test_445007f942xxxxxxxxxxxxxxxxxx484cAfd2", // App client ID
{
alwaysVisible: false, // default: true, wallet always visible
connectOptions: {
compact: true // default: false, regular plug-and-play login UI
},
position: 'left', // default: right
setWindowProvider: true, // default: false, window.ethereum not set
theme: 'light', // default: dark
})
```
Initialize First!
After creating the `AuthProvider`, wait until the `init` call is complete before invoking any of the other SDK functions.
```
try {
await auth.init()
} catch (e) {
// Handle exception case
}
```
`AuthProvider` Optional Parameters
Besides Client ID input parameter, you can optionally customize these settings in the `AuthProvider` constructor:
______________________________________________________________________
**`position`:** wallet position within the app context - `left`|`right`
**`theme`:** wallet theme - `light`|`dark`
**`connectOptions`:** [compact mode](../../../concepts/plug-and-play-auth/#compact-modal) for the built-in plug-and-play login UI - `true`|`false`
```
connectOptions: {
compact: true // default - false
},
```
______________________________________________________________________
See [`AuthProvider` constructor parameters](https://authsdk-ref-guide.netlify.app/interfaces/constructorparams) for details.
The 'HTML/CSS/JS' Web3 app is now **integrated** with the Arcana Auth SDK.
## What's Next?
Onboard users via the [built-in plug-and-play login UI](../../onboard/vanilla/use-plug-play-auth/) or a [custom login UI](../../onboard/vanilla/custom-ui/).
Use `AuthProvider`, the EIP-1193 provider offered by the SDK, to call supported JSON/RPC functions and [Web3 wallet operations](../../web3-ops/evm/) in the authenticated user's context.
## See also
**'HTML/CSS/JS'** integration example: See `sample-auth-html-css-js` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
- [FAQ](../../../faq/faq-gen/)
- [Troubleshooting Guide](../../../troubleshooting/)
- [Arcana Auth SDK Errors](../../auth-error-msg/)
- [Arcana Auth SDK Usage Guide](../../auth-usage-guide/)
Arcana Auth SDK Quick Links
- [Arcana Auth SDK Reference](https://authsdk-ref-guide.netlify.app/)
- [Release notes](../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth)
[Try Demo App](https://demo.arcana.network)
# Integrate Vue App
Integrate 'Vue' apps with[Arcana Auth SDK](../../../concepts/authsdk/) and onboard users via [social login](../../../concepts/social-login/). Enable users to sign blockchain transactions with the in-app [Arcana wallet](../../../concepts/anwallet/).
## Prerequisites
- [Register](../../../setup/config-auth/register-app/) the 'Vue' app and configure SDK usage [settings for social login](../../../setup/) providers, manage app [manage app chains](../../../setup/config-wallet-chains/) and [wallet user experience](../../../setup/config-wallet/).
Non-EVM Chains
When registering an app through Arcana Developer Dashboard, the choice of chain type (EVM, Solana, MultiversX, Near) is final. App developers can't change it later. They can switch the default chain within the same type. For example, a Solana app on Testnet can switch to Solana Mainnet or Solana Dev but not to MultiversX or an EVM chain.
## Steps
### 1. Install
```
npm install --save @arcana/auth
```
```
yarn add @arcana/auth
```
### 2. Initialize `AuthProvider`
```
import { AuthProvider } from "@arcana/auth";
let authInstance;
//Mainnet ClientId
const clientId = "xar_live_d7c88d9b033d100e4200d21a5c4897b896e60063";
if (authInstance == null) {
authInstance = new AuthProvider(clientId);
await authInstance.init();
}
// Use authInstance for user onboarding, JSON/RPC and wallet ops
```
`AuthProvider` Optional Parameters
Besides Client ID input parameter, you can optionally customize these settings in the `AuthProvider` constructor:
______________________________________________________________________
**`position`:** wallet position within the app context - `left`|`right`
**`theme`:** wallet theme - `light`|`dark`
**`connectOptions`:** [compact mode](../../../concepts/plug-and-play-auth/#compact-modal) for the built-in plug-and-play login UI - `true`|`false`
```
connectOptions: {
compact: true // default - false
},
```
______________________________________________________________________
See [`AuthProvider` constructor parameters](https://authsdk-ref-guide.netlify.app/interfaces/constructorparams) for details.
The 'Vue' Web3 app is now **integrated** with the Arcana Auth SDK.
## What's Next?
Onboard users via the [built-in plug-and-play login UI](../../onboard/vue/use-plug-play-auth/) or a [custom login UI](../../onboard/vanilla/custom-ui/).
Use `AuthProvider`, the EIP-1193 provider offered by the SDK, to call supported JSON/RPC functions and [Web3 wallet operations](../../web3-ops/evm/) in the authenticated user's context.
## See also
**'Vue'** integration example: See `sample-auth-vue` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
- [FAQ](../../../faq/faq-gen/)
- [Troubleshooting Guide](../../../troubleshooting/)
- [Arcana Auth SDK Errors](../../auth-error-msg/)
- [Arcana Auth SDK Usage Guide](../../auth-usage-guide/)
Arcana Auth SDK Quick Links
- [Arcana Auth SDK Reference](https://authsdk-ref-guide.netlify.app/)
- [Release notes](../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth)
[Try Demo App](https://demo.arcana.network)
# Integrate Wagmi App
[Wagmi](https://wagmi.sh/) is a React Hooks library for Ethereum that simplifies connecting Web3 apps to multiple wallets and chains.
Integrate 'Wagmi' apps with Arcana Auth SDK and onboard users via [social login](../../../concepts/social-login/). Enable users to sign blockchain transactions with the in-app [Arcana wallet](../../../concepts/anwallet/).
## Prerequisites
- [Register](../../../setup/config-auth/register-app/) the 'Wagmi' app and configure SDK usage [settings for social login](../../../setup/) providers, manage app [manage app chains](../../../setup/config-wallet-chains/) and [wallet user experience](../../../setup/config-wallet/).
Non-EVM Chains
When registering an app through Arcana Developer Dashboard, the choice of chain type (EVM, Solana, MultiversX, Near) is final. App developers can't change it later. They can switch the default chain within the same type. For example, a Solana app on Testnet can switch to Solana Mainnet or Solana Dev but not to MultiversX or an EVM chain.
## Steps
### 1. Install
**Wagmi 2.0**
```
npm install --save @arcana/auth-wagmi@3.0.0 @arcana/auth@1.0.11
```
**Wagmi 1.0**
```
npm install --save @arcana/auth-wagmi@2.0.0 @arcana/auth
```
**Wagmi 2.0**
```
yarn add @arcana/auth-wagmi@3.0.0 @arcana/auth@1.0.11
```
**Wagmi 1.0**
```
yarn add @arcana/auth-wagmi@2.0.0 @arcana/auth
```
### 2. Create `AuthProvider` & `ArcanaConnector`
Specify the **Client ID** assigned to the registered app to create the `AuthProvider`. Then use the `AuthProvider` to create `ArcanaConnector`.
```
import { AuthProvider } from "@arcana/auth";
import { ArcanaConnector } from "@arcana/auth-wagmi"
const auth = new AuthProvider('your-client-id');
const connector = new ArcanaConnector({ auth });
```
`AuthProvider` Optional Parameters
Besides Client ID input parameter, you can optionally customize these settings in the `AuthProvider` constructor:
______________________________________________________________________
**`position`:** wallet position within the app context - `left`|`right`
**`theme`:** wallet theme - `light`|`dark`
**`connectOptions`:** [compact mode](../../../concepts/plug-and-play-auth/#compact-modal) for the built-in plug-and-play login UI - `true`|`false`
```
connectOptions: {
compact: true // default - false
},
```
______________________________________________________________________
See [`AuthProvider` constructor parameters](https://authsdk-ref-guide.netlify.app/interfaces/constructorparams) for details.
Compact Mode
While creating the `AuthProvider`, you can choose the [compact mode (optional)](../../../concepts/plug-and-play-auth/#compact-modal) for the plug-and-play login UI.
### 3. Setup `WagmiConfig`
Create Wagmi config and specify the `ArcanaConnector`.
```
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
import { coinbaseWallet, injected, walletConnect } from 'wagmi/connectors'
import { AuthProvider } from '@arcana/auth';
import { ArcanaConnector } from "@arcana/auth-wagmi"
let auth: AuthProvider | null;
if (!auth) {
auth = new AuthProvider(
"xar_dev_c2fb7be163754e57d384e24257ea2c8d2a5dd31a"
);
}
export const connector = () => {
return new ArcanaConnector({auth,})
};
export const config = createConfig({
chains: [mainnet, sepolia],
connectors: [
injected(),
coinbaseWallet({ appName: 'Create Wagmi' }),
walletConnect({ projectId: import.meta.env.VITE_WC_PROJECT_ID }),
connector(),
],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})
declare module 'wagmi' {
interface Register {
config: typeof config
}
}
```
```
// Note:
// This sample code is for
// wagmi versions 1.x.y and auth-wagmi 2.a.b
import { configureChains, createConfig, WagmiConfig } from "wagmi";
import { publicProvider } from "wagmi/providers/public";
import { ArcanaConnector } from "@arcana/auth-wagmi";
import { polygon, polygonAmoy } from "wagmi/chains";
import { newAuthProvider } from "./utils/newArcanaAuth";
import { useAccount, useConnect, useDisconnect, useBalance } from 'wagmi'
import "../styles/globals.css";
const { chains, provider, webSocketProvider } = configureChains(
[mainnet, polygon, polygonAmoy],
[publicProvider()],
{ targetQuorum: 1 }
);
export const connector = (chains: Chain[]) => {
return new ArcanaConnector({
chains,
options: {
auth: newAuthProvider(),
login: {
provider: "google",
},
},
});
};
const { chains, publicClient } = configureChains(
[polygon, polygonAmoy],
[publicProvider()]
);
export const wagmiEntity = createConfig({
autoConnect: true,
connectors: [connector(chains)],
publicClient,
});
...
```
The 'Wagmi' Web3 app is now **integrated** with the Arcana Auth SDK.
## What's Next?
Onboard users via the [built-in plug-and-play login UI](../../onboard/wagmi/wagmi-pnp-ui/) or a [custom login UI](../../onboard/wagmi/wagmi-custom-ui/).
Use `AuthProvider`, the EIP-1193 provider offered by the SDK, to call supported JSON/RPC functions and [Web3 wallet operations](../../web3-ops/evm/) in the authenticated user's context.
## See also
**'Wagmi'** integration example: See `sample-auth-wagmi-2`, `sample-auth-wagmi-viem`, `sample-auth-wagmi` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
- [FAQ](../../../faq/faq-gen/)
- [Troubleshooting Guide](../../../troubleshooting/)
- [Arcana Auth SDK Errors](../../auth-error-msg/)
- [Arcana Auth SDK Usage Guide](../../auth-usage-guide/)
Arcana Auth SDK Quick Links
- [Arcana Auth SDK Reference](https://authsdk-ref-guide.netlify.app/)
- [Release notes](../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth)
Arcana Auth Wagmi SDK Quick Links
- [Arcana Auth Wagmi SDK Reference Guide](https://wagmi-authsdk-ref-guide.netlify.app/)
- [Release notes](../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth-wagmi/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth-wagmi)
[Try Demo App](https://demo.arcana.network)
# Integrate WalletConnect App
[WalletConnect](https://walletconnect.com/) allows Web3 app users to seamlessly switch between multiple connected wallets within a dApp.
Integrate 'WalletConnect' apps with Arcana Auth SDK and onboard users via [social login](../../../concepts/social-login/). Enable users to sign blockchain transactions with the in-app [Arcana wallet](../../../concepts/anwallet/).
## Prerequisites
- [Register](../../../setup/config-auth/register-app/) the 'WalletConnect' app and configure SDK usage [settings for social login](../../../setup/) providers, manage app [manage app chains](../../../setup/config-wallet-chains/) and [wallet user experience](../../../setup/config-wallet/).
Non-EVM Chains
When registering an app through Arcana Developer Dashboard, the choice of chain type (EVM, Solana, MultiversX, Near) is final. App developers can't change it later. They can switch the default chain within the same type. For example, a Solana app on Testnet can switch to Solana Mainnet or Solana Dev but not to MultiversX or an EVM chain.
## Steps
### 1. Install
**Wagmi 2.0**
```
npm install --save @arcana/auth-wagmi@3.0.0 @arcana/auth@1.0.11
```
**Wagmi 1.0**
```
npm install --save @arcana/auth-wagmi@2.0.0 @arcana/auth
```
**Wagmi 2.0**
```
yarn add @arcana/auth-wagmi@3.0.0 @arcana/auth@1.0.11
```
**Wagmi 1.0**
```
yarn add @arcana/auth-wagmi@2.0.0 @arcana/auth
```
### 2. Create `AuthProvider` & `ArcanaConnector`
```
// Set up Arcana Auth
import { AuthProvider } from "@arcana/auth";
let auth: AuthProvider | null;
const getAuthProvider = () => {
if (!auth) {
auth = new AuthProvider(
"xar_test_b2dde12aad64eb35d72b2c80926338e178b1fa3f"
);
}
return auth;
};
export { getAuthProvider };
```
Initialize First!
After creating the `AuthProvider`, wait until the `init` call is complete before invoking any of the other SDK functions.
```
try {
await auth.init()
} catch (e) {
// Handle exception case
}
```
```
//This example uses Arcana Wallet connector and Coinbase Wallet
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
import { coinbaseWallet, injected, walletConnect } from 'wagmi/connectors'
import { ArcanaConnector } from "@arcana/auth-wagmi";
import { getAuthProvider } from './arcanaConnector';
export const config = createConfig({
chains: [mainnet, sepolia],
connectors: [
injected(),
coinbaseWallet({ appName: 'Create Wagmi' }),
walletConnect({
projectId: '3fcc6bba6f1de962d911bb5b5c3dba68', //WalletConnect ProjectID
}),
ArcanaConnector(
{
auth: getAuthProvider(),
}
)
],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})
declare module 'wagmi' {
interface Register {
config: typeof config
}
}
```
`AuthProvider` Optional Parameters
Besides Client ID input parameter, you can optionally customize these settings in the `AuthProvider` constructor:
______________________________________________________________________
**`position`:** wallet position within the app context - `left`|`right`
**`theme`:** wallet theme - `light`|`dark`
**`connectOptions`:** [compact mode](../../../concepts/plug-and-play-auth/#compact-modal) for the built-in plug-and-play login UI - `true`|`false`
```
connectOptions: {
compact: true // default - false
},
```
______________________________________________________________________
See [`AuthProvider` constructor parameters](https://authsdk-ref-guide.netlify.app/interfaces/constructorparams) for details.
### 3. Set up `WagmiProvider`
Create Wagmi config and specify the `ArcanaConnector`.
```
//Use "`auth-wagmi` version > v2.0.0"
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { Buffer } from 'buffer'
import React from 'react'
import ReactDOM from 'react-dom/client'
import { WagmiProvider } from 'wagmi'
import App from './App.tsx'
import { config } from './wagmi.ts'
import './index.css'
globalThis.Buffer = Buffer
const queryClient = new QueryClient()
ReactDOM.createRoot(document.getElementById('root')!).render(
,
)
```
The 'WalletConnect' Web3 app is now **integrated** with the Arcana Auth SDK.
## What's Next?
Onboard users via the [built-in plug-and-play login UI](../../onboard/walletconnect/walletconnect-pnp-ui/) or a [custom login UI](../../onboard/walletconnect/walletconnect-custom-ui/).
Use `AuthProvider`, the EIP-1193 provider offered by the SDK, to call supported JSON/RPC functions and [Web3 wallet operations](../../web3-ops/evm/) in the authenticated user's context.
## See also
**'WalletConnect'** integration example: See `sample-auth-walletconnect` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
- [FAQ](../../../faq/faq-gen/)
- [Troubleshooting Guide](../../../troubleshooting/)
- [Arcana Auth SDK Errors](../../auth-error-msg/)
- [Arcana Auth SDK Usage Guide](../../auth-usage-guide/)
Arcana Auth SDK Quick Links
- [Arcana Auth SDK Reference](https://authsdk-ref-guide.netlify.app/)
- [Release notes](../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth)
Arcana Auth Wagmi SDK Quick Links
- [Arcana Auth Wagmi SDK Reference Guide](https://wagmi-authsdk-ref-guide.netlify.app/)
- [Release notes](../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth-wagmi/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth-wagmi)
[Try Demo App](https://demo.arcana.network)
# Integrate Web3-React App
[Web3-React](https://www.npmjs.com/package/web3-react) framework allows Connectors for various Web3 wallets.
Integrate 'Web3-React' apps with Arcana Auth SDK and onboard users via [social login](../../../concepts/social-login/). Enable users to sign blockchain transactions with the in-app [Arcana wallet](../../../concepts/anwallet/).
## Prerequisites
- [Register](../../../setup/config-auth/register-app/) the Wa'Web3-React'gmi app and configure SDK usage [settings for social login](../../../setup/) providers, manage app [manage app chains](../../../setup/config-wallet-chains/) and [wallet user experience](../../../setup/config-wallet/).
Non-EVM Chains
When registering an app through Arcana Developer Dashboard, the choice of chain type (EVM, Solana, MultiversX, Near) is final. App developers can't change it later. They can switch the default chain within the same type. For example, a Solana app on Testnet can switch to Solana Mainnet or Solana Dev but not to MultiversX or an EVM chain.
## Steps
### 1. Install
**Wagmi 2.0**
```
npm install --save @arcana/auth-wagmi@3.0.0 @arcana/auth@1.0.11
```
**Wagmi 1.0**
```
npm install --save @arcana/auth-wagmi@2.0.0 @arcana/auth
```
**Wagmi 2.0**
```
yarn add @arcana/auth-wagmi@3.0.0 @arcana/auth@1.0.11
```
**Wagmi 1.0**
```
yarn add @arcana/auth-wagmi@2.0.0 @arcana/auth
```
### 2. Create `AuthProvider` and `ArcanaConnector`
```
import { initializeConnector } from "@web3-react/core";
import { ArcanaConnector } from "@arcana/auth-web3-react";
import { AuthProvider } from "@arcana/auth";
import { URLS } from "../chains";
const auth = new AuthProvider(
"xar_test_b2ddexxxxxxxxxxxxxxxxxxxx8b1fa3f" //App client ID via Dashboard
);
export const [arcanaConnect, hooks] = initializeConnector(
(actions) =>
new ArcanaConnector(auth, {
actions,
})
);
...
```
### 3. `ArcanaConnectCard` Component
In the Web3-React app, use the `ArcanaConnector` and React hooks to connect `ArcanaConnector` with the Web3-React ecosystem via `ArcanaConnectCard`.
```
import { useEffect, useState } from "react";
import { MAINNET_CHAINS } from "../../chains";
import { hooks, arcanaConnect } from "../../connectors/arcanaWallet";
import { Card } from "../Card";
const CHAIN_IDS = Object.keys(MAINNET_CHAINS).map(Number);
const {
useChainId,
useAccounts,
useIsActivating,
useIsActive,
useProvider,
useENSNames,
} = hooks;
export default function ArcanaConnectCard() {
const chainId = useChainId();
const accounts = useAccounts();
const isActivating = useIsActivating();
const isActive = useIsActive();
const provider = useProvider();
const ENSNames = useENSNames(provider);
const [error, setError] = useState(undefined);
// attempt to connect eagerly on mount
useEffect(() => {
arcanaConnect.connectEagerly().catch((error) => {
console.debug("Failed to connect eagerly to arcanaConnect", error);
});
}, []);
return (
);
}
```
Now, you are all set to onboard users in the Web3-React app using the plug-and-play login UI and enable Arcana wallet for the authenticated users.
pages/index.tsx
```
import ArcanaConnectCard from "../components/connectorCards/ArcanaConnectCard";
import CoinbaseWalletCard from "../components/connectorCards/CoinbaseWalletCard";
import GnosisSafeCard from "../components/connectorCards/GnosisSafeCard";
import MetaMaskCard from "../components/connectorCards/MetaMaskCard";
import NetworkCard from "../components/connectorCards/NetworkCard";
import WalletConnectCard from "../components/connectorCards/WalletConnectCard";
import WalletConnectV2Card from "../components/connectorCards/WalletConnectV2Card";
import ProviderExample from "../components/ProviderExample";
export default function Home() {
return (
<>
);
}
```
The 'Web3-React' Web3 app is now **integrated** with the Arcana Auth SDK.
## What's Next?
Onboard users via the [built-in plug-and-play login UI](../../onboard/web3-react/web3-react-pnp-ui/) or a [custom login UI](../../onboard/web3-react/web3-react-custom-ui/).
Use `AuthProvider`, the EIP-1193 provider offered by the SDK, to call supported JSON/RPC functions and [Web3 wallet operations](../../web3-ops/evm/) in the authenticated user's context.
## See also
**'Web3-React'** integration example: See `sample-auth-web3-react` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
- [FAQ](../../../faq/faq-gen/)
- [Troubleshooting Guide](../../../troubleshooting/)
- [Arcana Auth SDK Errors](../../auth-error-msg/)
- [Arcana Auth SDK Usage Guide](../../auth-usage-guide/)
Arcana Auth SDK Quick Links
- [Arcana Auth SDK Reference](https://authsdk-ref-guide.netlify.app/)
- [Release notes](../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth)
Arcana Auth Wagmi SDK Quick Links
- [Arcana Auth Wagmi SDK Reference Guide](https://wagmi-authsdk-ref-guide.netlify.app/)
- [Release notes](../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth-wagmi/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth-wagmi)
[Try Demo App](https://demo.arcana.network)
# Get Started: Flutter Apps
'Flutter' Web3 apps can onboard users via social login by integrating with the Arcana Auth Flutter SDK!
## Prerequisites
- Flutter [v3.15.0](https://flutter-ko.dev/development/tools/sdk/releases) or higher
## 1. Register & Configure
- App must be [registered](../../../setup/config-auth/register-app/) via the Arcana Developer Dashboard:
- Optionally [configure auth settings](../../../setup/config-auth/) such as [social login](../../../concepts/social-login/), [wallet user experience](../../../concepts/anwallet/), etc.
## 2. Install SDK
The Arcana Auth Flutter SDK is available at 'Pub.dev' as a [Flutter plugin](https://docs.flutter.dev/packages-and-plugins/developing-packages) package called [`arcana_auth_flutter`](https://pub.dev/packages/arcana_auth_flutter).
Add the following line to the dependencies section in your app's `pubspec.yaml` file:
pubspec.yaml
```
dependencies:
flutter: # Required for every Flutter project
sdk: flutter # Required for every Flutter project
flutter_localizations: # Required to enable localization
sdk: flutter # Required to enable localization
arcana_auth_flutter: ^0.0.6
```
Use latest Arcana Auth Flutter SDK
Use latest Arcana Auth Flutter SDK release **v0.0.6** available at [pub.dev](https://pub.dev/packages/arcana_auth_flutter).
## 3. Integrate
Once installed, integrate the app with the Arcana Auth Flutter SDK. Create an `AuthProvider` instance and specify the unique **client ID** assigned to the registered app.
```
import 'package:arcana_sdk/arcana_sdk.dart';
final auth = AuthProvider(clientId:"xar_xxxx_...");
auth.init(context: context);
```
Next, add code to onboard users and allow authenticated users to sign blockchain transactions using Arcana wallet.
### Onboard Users
Add code to onboard users through one of the configured social login providers or via OTP login option.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
**Social Login**
```
auth.loginWithSocial("google").then((_) => {
// On login Success
}).catchError(...);
```
**OTP Login**
```
auth.loginWithOTP("${email_id}").then((_) => {
// On login Success
}).catchError(...);
```
**Logout**
Call the logout method in response to a user's choice to log out. The built-in Arcana wallet UI has a **Logout** option in the user profile tab.
```
auth.logout().then((_) => {
// On logout
});
```
**Get User Address**
```
auth.getAccount().then((account) => ...);
```
**Get User Details**
```
auth.getUserInfo().then((UserInfo info) => ...);
```
**Show/Hide Wallet UI**
Developers can choose to show or hide the wallet as per the app requirements.
```
auth.showWallet();
```
```
auth.hideWallet();
```
**Check Wallet Visibility**
To determine in the Flutter app if the Arcana wallet is visible in the app's context, get the visibility status:
```
var isVisible = auth.isVisible();
```
**Clear Cache**
Flutter apps can use `clearCache` to clear the Webview cache:
```
auth.clearCache();
```
### Sign Transactions
The `AuthProvider` supports the JSON-RPC requests for the following Web3 operations:
```
auth.request(method: "...", params: [...]).then(() => ...);
```
```
auth.sendTransaction({ to: "", value: "" }).then((hash) => ...);
```
## 4. Deploy
**That's all!**
The 'Flutter' app is ready to onboard users and allow them to sign blockchain transactions.
## See also
- **'Flutter'** integration example: See `sample-auth-flutter` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
Arcana Auth Flutter SDK Quick Links
- [Release notes](../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth-flutter/releases)
- [Download SDK](https://pub.dev/packages/arcana_auth_flutter)
# Get Started: React-Native Apps
'React-Native' Web3 apps can onboard users via social login by integrating with the Arcana Auth React-Native SDK!
## Prerequisites
- React-Native [v0.71.8](https://reactnative.dev/versions) or higher
## 1. Register & Configure
- App must be [registered](../../../setup/config-auth/register-app/) via the Arcana Developer Dashboard:
- Optionally [configure auth settings](../../../setup/config-auth/) such as [social login](../../../concepts/social-login/), [wallet user experience](../../../concepts/anwallet/), etc.
## 2. Install SDK
For 'React-Native' Web3 apps, install the [`auth-react-native`](https://www.npmjs.com/package/@arcana/auth-react-native) package.
```
npm i @arcana/auth-react-native
(cd ios && pod install)
```
**Note:** You are **not required** to manually link this module, as it supports React Native auto-linking.
Use latest SDKs
Use the latest Arcana Auth React-Native SDK release **v0.0.4** available at [npm](https://www.npmjs.com/package/@arcana/auth-react-native).
## 3. Integrate
Use the unique client ID assigned to the app during registration to integrate with the SDK.
```
import React, { useState } from "react";
import { Button, View } from "react-native";
import Auth from "@arcana/auth-react-native";
export default function App() {
const authRef = React.useRef(null);
return (
);
}
```
```
```
### Onboard Users
Call `Auth` functions and onboard users through the configured authentication providers.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
**Google Login**\*
```
// For logging in
const loginWithGoogle = () => {
if(authRef !== null){
authRef.current.loginWithSocial('google').then(() => {
// logged in
}).catch(err => {
// already logged in
// or error during login
})
}
}
```
**Logout**
Add code to provide user log out option via the `logout` method or let authenticated users log out using the wallet UI logout option in the 'User Profile' tab.
```
// Logout User from session
const logout = () => {
if(authRef !== null){
authRef.current.logout().then(() => {
// on logout
});
}
};
```
**Show/Hide Wallet**
Once the user logs into the app, they can instantly access the Arcana wallet. Developers can choose to show and hide the wallet as required by the app.
```
// For showing wallet
const showWallet = () => {
if(authRef !== null){
authRef.current.showWallet();
}
}
// For hiding wallet
const hideWallet = () => {
if(authRef !== null){
authRef.current.hideWallet();
}
}
```
```
// For getting logged in user info
const getUserInfo = async () => {
if(authRef !== null){
return authRef.current.getUserInfo();
}
};
```
```
// For getting current account
const getAccount = async () => {
if(authRef !== null){
return await authRef.current.getAccount();
}
};
```
```
return (
);
```
### Sign Transactions
Use `authRef` EIP-1193 provider to call JSON-RPC functions and Web3 wallet operations.
```
// For sending transaction
const sendTransaction = async data => {
if(authRef !== null){
return await authRef.current.sendTransaction(data);
}
};
// For getting current account balance
const getBalance = async () => {
if(authRef !== null){
return await authRef.current.getBalance();
}
};
// EIP 1193 request method
const request = async (method, params) => {
if(authRef !== null){
return await authRef.current.request({ method, params });
}
};
```
## 4. Deploy
**That's all!**
The 'React-Native' app is ready to onboard users and allow them to sign blockchain transactions.
## See also
- **'React-Native'** integration example: See `sample-auth-react-native` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
Arcana Auth React-Native SDK Quick Links
- [Release notes](../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth-react-native/releases)
- [Download auth-react-native](https://www.npmjs.com/package/@arcana/auth-react-native)
# MultiversX App: Onboard Users
Learn how to onboard users through the configured [social login](../../../concepts/social-login/) providers in a 'MultiversX' app.
## Prerequisites
- [Register](../../../setup/config-dApp-with-db-for-mvx/) the 'MultiversX' app and configure SDK usage [settings for social login](../../../setup/) providers, [manage MultiversX chains](../../../setup/config-wallet-chains/) and [wallet user experience](../../../setup/config-wallet/).
- Install the [required SDK packages](../../sdk-installation/) for 'MultiversX'.
- [Integrate](../../integrate/mvx/) 'MultiversX' app and obtain an `AuthProvider` for blockchain transactions.
Non-EVM Chains
When registering an app through Arcana Developer Dashboard, the choice of chain type (EVM, Solana, MultiversX, Near) is final. App developers can't change it later. They can switch the default chain within the same type. For example, a Solana app on Testnet can switch to Solana Mainnet or Solana Dev but not to MultiversX or an EVM chain.
MultiversX Shard Selection
MultiversX uses [adaptive state sharding](https://docs.multiversx.com/technology/adaptive-state-sharding/) for horizontal scaling. Shards allow it to process far more transactions through parallelization, improving transaction throughput and efficiency.
Choose your shard once when registering a MultiversX app on the Arcana Developer Dashboard. It cannot be changed later.
By default, Arcana uses 'Shard 0' to deploy all app contracts and allocate wallet addresses for users. The benefit is that when addresses from the same shard interact with contracts on the same shard, latencies are much lower than in cross-shard interactions.
## Onboard Users
User Onboarding Considerations
1. **Log in Options:** What options are offered by the app to the onboard users via social login? *Configure the required [social login providers](../../../setup/config-auth/) via the dashboard.*
1. **Built-in or Custom Login UI:** Does the Web3 app have a custom login UI or do they need to use the built-in, [plug-and-play login UI](../../../concepts/plug-and-play-auth/) modal offered by the Arcana Auth SDK? *Choose the appropriate onboarding functions of the `AuthProvider`.*
1. **Session Management:** Does the authenticated user stay logged in if they accidentally close the browser tab? If yes, what is the acceptable Web3 app security window for the session? After how long should the session expire and a user re-login is necessitated for security? *Configure the [session management settings](../../../setup/config-dApp-with-db/#login-session-management) via the dashboard.*
1. **Reconnect:** Does the Web3 app allow users to stay connected or require re-authentication after a certain time has elapsed? *Use `isConnected`, `canReconnect` and `reconnect` functions of the `AuthProvider`.*
[Wagmi Apps](../wagmi/wagmi-pnp-ui/) [RainbowKit Apps](../rainbow/rainbow-pnp-ui/) [WalletConnect Apps](../walletconnect/walletconnect-pnp-ui/) [Web3-React Apps](../web3-react/web3-react-pnp-ui/) [React/Next.js Apps](../react-nextjs/use-plug-play-auth/) [Vanilla HTML/CSS/JS App](../vanilla/use-plug-play-auth/) [Vue App](../vue/use-plug-play-auth/) [Flutter Apps](../../mobile/flutter-get-started/) [React-Native Apps](../../mobile/react-native-get-started/)
[Wagmi Apps](../wagmi/wagmi-custom-ui/) [RainbowKit Apps](../rainbow/rainbow-custom-ui/) [WalletConnect Apps](../walletconnect/walletconnect-custom-ui/) [Web3-React Apps](../web3-react/web3-react-custom-ui/) [React/Next.js Apps](../react-nextjs/custom-ui/) [Vanilla HTML/CSS/JS App](../vanilla/custom-ui/) [Vue App](../vue/custom-ui/) [Flutter Apps](../../mobile/flutter-get-started/) [React-Native Apps](../../mobile/react-native-get-started/)
## Advanced
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
Global vs. App Specific Keys
Apps using app-specific keys must use a custom login UI that allows users to input the OTP. In this case, the `isCompleteRequired` boolean returns `true` after initiating login with OTP.
Apps using global keys are not required to use a custom login UI. A built-in login UI is automatically displayed for the user for OTP. Users must enter the OTP received via email in this UI.
MFA Enabled / Disabled
During passwordless login via OTP, apps configured for MFA and those using overlays must hide it to enable OTP input. Use the `isMFARequired` callback in the `loginWithOTPComplete` method to hide the overlay.
Reconnect Users
Use `canReconnect` and `reconnect` methods of `AuthProvider` within a 30-min window of the user-logout action. Allow users to automatically reconnect to the app without re-authentication.
See [`canReconnect`](https://authsdk-ref-guide.netlify.app/classes/authprovider#canReconnect) and [`reconnect`](https://authsdk-ref-guide.netlify.app/classes/authprovider#reconnect) for details.
Apps Using Custom Auth
Web3 apps that use custom user authentication solutions and require authenticated users to sign blockchain transactions can also integrate with the Arcana Auth SDK. These apps can skip the social onboarding feature and use `loginWithCustomProvider` function of the `AuthProvider` to assign keys securely. [Learn more...](../../custom-auth/)
## What's Next?
Use the EIP-1193 provider offered by the SDK to call JSON/RPC functions and other [supported Web3 wallet operations on MultiversX](../../web3-ops/mvx/) in the authenticated user's context.
## See Also
**'MultiversX'** integration example: See `sample-auth-mvx` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
- [MultiversX FAQ](../../../faq/faq-mvx/)
[Try Demo App](https://demo.arcana.network)
# Near App: Onboard Users
Learn how to onboard users through the configured [social login](../../../concepts/social-login/) providers in a 'Near' app.
## Prerequisites
- [Register](../../../setup/config-dApp-with-db-for-near/) the 'Near' app and configure SDK usage [settings for social login](../../../setup/) providers, [manage Near chains](../../../setup/config-wallet-chains/) and [wallet user experience](../../../setup/config-wallet/).
- Install the [required SDK packages](../../sdk-installation/) for 'Near'.
- [Integrate](../../integrate/near/) 'Near' app and create `AuthProvider`, `ArcanaConnector` as per the app type.
Non-EVM Chains
When registering an app through Arcana Developer Dashboard, the choice of chain type (EVM, Solana, MultiversX, Near) is final. App developers can't change it later. They can switch the default chain within the same type. For example, a Solana app on Testnet can switch to Solana Mainnet or Solana Dev but not to MultiversX or an EVM chain.
## Onboard Users
User Onboarding Considerations
1. **Log in Options:** What options are offered by the app to the onboard users via social login? *Configure the required [social login providers](../../../setup/config-auth/) via the dashboard.*
1. **Built-in or Custom Login UI:** Does the Web3 app have a custom login UI or do they need to use the built-in, [plug-and-play login UI](../../../concepts/plug-and-play-auth/) modal offered by the Arcana Auth SDK? *Choose the appropriate onboarding functions of the `AuthProvider`.*
1. **Session Management:** Does the authenticated user stay logged in if they accidentally close the browser tab? If yes, what is the acceptable Web3 app security window for the session? After how long should the session expire and a user re-login is necessitated for security? *Configure the [session management settings](../../../setup/config-dApp-with-db/#login-session-management) via the dashboard.*
1. **Reconnect:** Does the Web3 app allow users to stay connected or require re-authentication after a certain time has elapsed? *Use `isConnected`, `canReconnect` and `reconnect` functions of the `AuthProvider`.*
[Wagmi Apps](../wagmi/wagmi-pnp-ui/) [RainbowKit Apps](../rainbow/rainbow-pnp-ui/) [WalletConnect Apps](../walletconnect/walletconnect-pnp-ui/) [Web3-React Apps](../web3-react/web3-react-pnp-ui/) [React/Next.js Apps](../react-nextjs/use-plug-play-auth/) [Vanilla HTML/CSS/JS App](../vanilla/use-plug-play-auth/) [Vue App](../vue/use-plug-play-auth/) [Flutter Apps](../../mobile/flutter-get-started/) [React-Native Apps](../../mobile/react-native-get-started/)
[Wagmi Apps](../wagmi/wagmi-custom-ui/) [RainbowKit Apps](../rainbow/rainbow-custom-ui/) [WalletConnect Apps](../walletconnect/walletconnect-custom-ui/) [Web3-React Apps](../web3-react/web3-react-custom-ui/) [React/Next.js Apps](../react-nextjs/custom-ui/) [Vanilla HTML/CSS/JS App](../vanilla/custom-ui/) [Vue App](../vue/custom-ui/) [Flutter Apps](../../mobile/flutter-get-started/) [React-Native Apps](../../mobile/react-native-get-started/)
## Advanced
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
Global vs. App Specific Keys
Apps using app-specific keys must use a custom login UI that allows users to input the OTP. In this case, the `isCompleteRequired` boolean returns `true` after initiating login with OTP.
Apps using global keys are not required to use a custom login UI. A built-in login UI is automatically displayed for the user for OTP. Users must enter the OTP received via email in this UI.
MFA Enabled / Disabled
During passwordless login via OTP, apps configured for MFA and those using overlays must hide it to enable OTP input. Use the `isMFARequired` callback in the `loginWithOTPComplete` method to hide the overlay.
Reconnect Users
Use `canReconnect` and `reconnect` methods of `AuthProvider` within a 30-min window of the user-logout action. Allow users to automatically reconnect to the app without re-authentication.
See [`canReconnect`](https://authsdk-ref-guide.netlify.app/classes/authprovider#canReconnect) and [`reconnect`](https://authsdk-ref-guide.netlify.app/classes/authprovider#reconnect) for details.
Apps Using Custom Auth
Web3 apps that use custom user authentication solutions and require authenticated users to sign blockchain transactions can also integrate with the Arcana Auth SDK. These apps can skip the social onboarding feature and use `loginWithCustomProvider` function of the `AuthProvider` to assign keys securely. [Learn more...](../../custom-auth/)
## What's Next?
Use the EIP-1193 provider offered by the SDK to call JSON/RPC functions and other [supported Web3 wallet operations on Near](../../web3-ops/near/) in the authenticated user's context.
## See also
**'Near'** integration example: See `sample-auth-near` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
- [Near FAQ](../../../faq/faq-near/)
[Try Demo App](https://demo.arcana.network)
# Solana App: Onboard Users
Learn how to onboard users through the configured [social login](../../../concepts/social-login/) providers in a 'Solana' app.
## Prerequisites
- [Register](../../../setup/config-dApp-with-db-for-Solana/) the 'Solana' app and configure SDK usage [settings for social login](../../../setup/) providers, [manage Solana chains](../../../setup/config-wallet-chains/) and [wallet user experience](../../../setup/config-wallet/).
- Install the [required SDK packages](../../sdk-installation/) for 'Solana'.
- [Integrate](../../integrate/solana/) 'Solana' app and create `AuthProvider`, `ArcanaConnector` as per the app type.
Non-EVM Chains
When registering an app through Arcana Developer Dashboard, the choice of chain type (EVM, Solana, MultiversX, Near) is final. App developers can't change it later. They can switch the default chain within the same type. For example, a Solana app on Testnet can switch to Solana Mainnet or Solana Dev but not to MultiversX or an EVM chain.
## Onboard Users
User Onboarding Considerations
1. **Log in Options:** What options are offered by the app to the onboard users via social login? *Configure the required [social login providers](../../../setup/config-auth/) via the dashboard.*
1. **Built-in or Custom Login UI:** Does the Web3 app have a custom login UI or do they need to use the built-in, [plug-and-play login UI](../../../concepts/plug-and-play-auth/) modal offered by the Arcana Auth SDK? *Choose the appropriate onboarding functions of the `AuthProvider`.*
1. **Session Management:** Does the authenticated user stay logged in if they accidentally close the browser tab? If yes, what is the acceptable Web3 app security window for the session? After how long should the session expire and a user re-login is necessitated for security? *Configure the [session management settings](../../../setup/config-dApp-with-db/#login-session-management) via the dashboard.*
1. **Reconnect:** Does the Web3 app allow users to stay connected or require re-authentication after a certain time has elapsed? *Use `isConnected`, `canReconnect` and `reconnect` functions of the `AuthProvider`.*
[Wagmi Apps](../wagmi/wagmi-pnp-ui/) [RainbowKit Apps](../rainbow/rainbow-pnp-ui/) [WalletConnect Apps](../walletconnect/walletconnect-pnp-ui/) [Web3-React Apps](../web3-react/web3-react-pnp-ui/) [React/Next.js Apps](../react-nextjs/use-plug-play-auth/) [Vanilla HTML/CSS/JS App](../vanilla/use-plug-play-auth/) [Vue App](../vue/use-plug-play-auth/) [Flutter Apps](../../mobile/flutter-get-started/) [React-Native Apps](../../mobile/react-native-get-started/)
[Wagmi Apps](../wagmi/wagmi-custom-ui/) [RainbowKit Apps](../rainbow/rainbow-custom-ui/) [WalletConnect Apps](../walletconnect/walletconnect-custom-ui/) [Web3-React Apps](../web3-react/web3-react-custom-ui/) [React/Next.js Apps](../react-nextjs/custom-ui/) [Vanilla HTML/CSS/JS App](../vanilla/custom-ui/) [Vue App](../vue/custom-ui/) [Flutter Apps](../../mobile/flutter-get-started/) [React-Native Apps](../../mobile/react-native-get-started/)
## Advanced
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
Global vs. App Specific Keys
Apps using app-specific keys must use a custom login UI that allows users to input the OTP. In this case, the `isCompleteRequired` boolean returns `true` after initiating login with OTP.
Apps using global keys are not required to use a custom login UI. A built-in login UI is automatically displayed for the user for OTP. Users must enter the OTP received via email in this UI.
MFA Enabled / Disabled
During passwordless login via OTP, apps configured for MFA and those using overlays must hide it to enable OTP input. Use the `isMFARequired` callback in the `loginWithOTPComplete` method to hide the overlay.
Reconnect Users
Use `canReconnect` and `reconnect` methods of `AuthProvider` within a 30-min window of the user-logout action. Allow users to automatically reconnect to the app without re-authentication.
See [`canReconnect`](https://authsdk-ref-guide.netlify.app/classes/authprovider#canReconnect) and [`reconnect`](https://authsdk-ref-guide.netlify.app/classes/authprovider#reconnect) for details.
Apps Using Custom Auth
Web3 apps that use custom user authentication solutions and require authenticated users to sign blockchain transactions can also integrate with the Arcana Auth SDK. These apps can skip the social onboarding feature and use `loginWithCustomProvider` function of the `AuthProvider` to assign keys securely. [Learn more...](../../custom-auth/)
## What's Next?
Use the EIP-1193 provider offered by the SDK to call JSON/RPC functions and other [supported Web3 wallet operations for Solana](../../web3-ops/solana/) in the authenticated user's context.
## See also
**'Solana'** integration example: See `sample-auth-solana` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
- [Solana FAQ](../../../faq/faq-solana/)
[Try Demo App](https://demo.arcana.network)
# Unity App: Onboard Users
Learn how to onboard users via [social login](../../../concepts/social-login/) in a Web3 Unity gaming app integrated with the [Arcana Auth Unity SDK](../../../concepts/authsdk/) and allow authenticated users to access the Arcana wallet within the app context.
## Prerequisites
- The Unity Web3 gaming App must be [integrated with the Arcana Auth Unity SDK](../../integrate/unity/).
## Onboarding Users
*Follow these steps to onboard users in a Unity Web3 gaming app with the Arcana Auth Unity SDK and allow authenticated users to access the Arcana wallet.*
Call `LoginWithSocial` or `LoginWithOTP` to onboard the user. Choose one of the [supported user onboarding options](../../../web3-stack/auth/) such as Google, Steam, etc.
```
// After initializing the SDK
if (loginMethod == LoginMethod.Passwordless)
arcanaSDK.LoginWithOTP(email);
else
arcanaSDK.LoginWithSocial(loginMethod);
```
That is all.
The Unity Web3 gaming app can now onboard users via the configured social login providers.
## What's Next?
After adding code to onboard users in a Unity Web3 gaming app, developers can add code to [enable Web3 wallet operations](../../web3-ops/unity-wallet-ops/) for authenticated users to sign transactions.
## See also
- [Authentication Types](../../../concepts/authtype/)
- [Unity Quick Start Guide](../../../quick-start/unity-quick-start/)
# Login Users via Passkeys
In this guide, you will learn how a Web3 app integrated with the Arcana Auth SDK can let users set up [passkeys](../../../../concepts/authtype/auth-passkeys/) as an [alternative login](../../../../concepts/authtype/auth-passkeys/#alternate-login) option.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- The app must be [registered using the Arcana Developer Dashboard](../../../../setup/config-auth/register-app/). A unique Client ID is assigned after app registration. It is required for integrating the app with the Arcana Auth SDK.
- [Configure passkeys settings](../../../../setup/config-auth-passkeys/) in the Arcana Developer Dashboard.
- Follow the instructions as per the app type and [integrate the app](../../../integrate/vanilla-html-css-js/) with the Arcana Auth SDK.
## Steps
*Follow these steps to enable passkeys as an alternative login for users in a Web3 app integrated with the Arcana Auth SDK.*
### 1. Authenticate User
Add code to onboard users via [social login](../../vanilla/custom-ui/build-social/) or [passwordless](../../vanilla/custom-ui/build-pwdless-auth/) options. Use `loginWithSocial` or `loginWithOTP` to onboard users for their first login without passkeys.
### 2. Link Passkeys
In the authenticated user's context, check if the browser supports logging in via passkey through the `IsPasskeyLoginSupported` function. If the app browser supports passkeys, call `linkPasskey` function in the authenticated user's context to bind the passkey with the app.
```
import { AuthProvider } from "@arcana/auth"
const auth = new AuthProvider("...")
window.onload = () => {
await auth.init()
}
if auth.isPasskeyLoginSupported(){
console.log("Passkey login is supported by the device/browser.")
// The device or browser running the app supports Passkey Login.
// Add code to allow non-passkey authenticated user to set up passkey
...
}
```
The `linkPasskey` function invokes the device/browser specific passkey functionality. User will be prompted to create a passkey if none exist on the device. Or a list of available passkeys will be displayed for the user to choose from. Then the selected passkey can be linked or bound to the app for future login attempts.
```
import { AuthProvider } from "@arcana/auth"
const auth = new AuthProvider("...")
window.onload = () => {
await auth.init()
}
// First login / signup
// Display custom login UI with non-passkey login options
...
// Allow user to click log in via one of the options
if !auth.isLoggedIn(){
// Onboard user via non-passkey option
await auth.loginWithSocial({{ no such element: dict object['social_provider'] }})
// Check if the device/browser support passkey login
if auth.isPasskeyLoginSupported(){
// Enable authenticated user to link a passkey with the app
// Post login function
await auth.linkPasskey();
}
}
```
After passkeys are set for the app, the `getMyPasskeys` can be called in the authenticated user's context to list all the user passkeys linked with the app on the device/browser.
```
import { AuthProvider } from "@arcana/auth";
const auth = new AuthProvider("...");
window.onload = () => {
await auth.init();
}
if !auth.isLoggedIn(){
// Onboard user via non-passkey option
await auth.loginWithSocial({{ no such element: dict object['social_provider'] }});
const userInfo = auth.getUser();
console.log("userInfo.name", userInfo.name);
// Check if the device/browser support passkey login
if auth.isPasskeyLoginSupported(){
// Enable authenticated user to link a passkey with the app
// Post login function
await auth.linkPasskey();
// Post login function
const passkeys = await auth.getMyPasskeys();
console.log({ passkeys });
}
...
}
```
### Enable Passkey Login
Once passkeys are set up by the user, enable a 'login with passkey' option in the custom login UI of the app. When a user chooses this option to log in, call `loginWithPasskey`. This will bring up the device specific UI to display a list of passkeys and let the user select one to onboard the app.
```
import { AuthProvider } from "@arcana/auth"
const auth = new AuthProvider("...")
window.onload = () => {
await auth.init()
}
...
// Display custom login UI with non-passkey login options
...
// Allow user to click log in via one of the options
if !auth.isLoggedIn(){
// Onboard user via non-passkey option
await auth.loginWithSocial({{ no such element: dict object['social_provider'] }});
const userInfo = auth.getUser();
console.log("userInfo.name", userInfo.name);
// Check if the device/browser support passkey login
if auth.isPasskeyLoginSupported(){
// Enable authenticated user to link a passkey with the app
// Post login function
await auth.linkPasskey();
// Post login function
const passkeys = await auth.getMyPasskeys();
console.log({ passkeys });
}
}
// Allow user to choose and log out after passkey linking is done
// Display custom login UI with all onboarding options including passkeys
// User clicks 'login with passkey' option in the UI
if !auth.isLoggedIn(){
// Pre login function
await auth.loginWithPasskey();
...
}
...
```
Developers can also let user view the passkeys linked with the app or website and unlink them, if required.
### List Passkeys
In the authenticated user's context, call `getMyPasskeys` to list all the user passkeys associated with the app.
```
import { AuthProvider } from "@arcana/auth";
const auth = new AuthProvider("...");
window.onload = () => {
await auth.init();
}
if !auth.isLoggedIn(){
// Onboard user via non-passkey option
await auth.loginWithSocial({{ no such element: dict object['social_provider'] }});
const userInfo = auth.getUser();
console.log("userInfo.name", userInfo.name);
// Check if the device/browser support passkey login
if auth.isPasskeyLoginSupported(){
// Enable authenticated user to link a passkey with the app
// Post login function
await auth.linkPasskey();
// Post login function
const passkeys = await auth.getMyPasskeys();
console.log({ passkeys });
}
...
}
```
### Unlink Passkeys
Apps can allow users to unlink the passkeys associated with an app.
To do this, call `getMyPasskeys`in the authenticated user's context. This will list all the passkeys associated with the app. Let the user select a passkey. Specify the id of the selected passkey and call `unlinkPasskey(id)`. This will ensure that on subsequent login attempts, user cannot onboard the app with the unlinked passkey.
```
import { AuthProvider } from "@arcana/auth"
const auth = new AuthProvider("...")
window.onload = () => {
await auth.init()
}
...
// First login / signup
// Display custom login UI with non-passkey login options
...
// Allow user to click log in via one of the options
if !auth.isLoggedIn(){
// Onboard user via non-passkey option
await auth.loginWithSocial({{ no such element: dict object['social_provider'] }});
const userInfo = auth.getUser();
console.log("userInfo.name", userInfo.name);
// Check if the device/browser support passkey login
if auth.isPasskeyLoginSupported(){
// Enable authenticated user to link a passkey with the app
// Post login function
await auth.linkPasskey();
// Post login function
const passkeys = await auth.getMyPasskeys();
console.log({ passkeys });
}
}
// Allow user to choose and log out after passkey linking is done
// Display custom login UI with all onboarding options including passkeys
// User clicks 'login with passkey' option in the UI
// Pre login function
await auth.loginWithPasskey();
...
if !auth.isLoggedIn(){
// Allow user to select passkey and unlink
// Post login function
const passkeys = await auth.getMyPasskeys();
console.log({ passkeys });
// User selects passkey n via device/browser passkey UI
if (passkeys[n]){
// Post login function
await auth.unlinkPasskey(passkey[n]);
}
}
```
**That is all.**
Your dApp is all set for onboarding users via the passkeys option.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../concepts/authtype/)
- [Configure Social Providers](../../../../setup/)
- [Arcana Auth SDK Errors](../../../auth-error-msg/)
- [Arcana Auth SDK Usage Guide](../../../auth-usage-guide/)
- [Arcana Auth SDK Reference](https://authsdk-ref-guide.netlify.app/)
# Login Users via Passkeys
In this guide, you will learn how a Web3 app integrated with the Arcana Auth SDK let users [sign-up and login](../../../../concepts/authtype/auth-passkeys/#sign-up-login) into the app via [passkeys](../../../../concepts/authtype/auth-passkeys/) as the only app onboarding.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- The app must be [registered using the Arcana Developer Dashboard](../../../../setup/config-auth/register-app/). A unique Client ID is assigned after app registration. It is required for integrating the app with the Arcana Auth SDK.
- [Configure passkeys settings](../../../../setup/config-auth-passkeys/) in the Arcana Developer Dashboard.
- Follow the instructions as per the app type and [integrate the app](../../../integrate/vanilla-html-css-js/) with the Arcana Auth SDK.
## Steps
*Follow these steps to enable sign-up & login via passkeys in a Web3 app that is integrated with the Arcana Auth SDK.*
### 1. Register Passkey
Add code to sign-up and create new user account via `registerWithPasskey()`. This will let the user create a new passkey and link it with the app in one shot. The newly created user will be assigned a blockchain wallet address as well. Once user has created the passkeys, enable the `Login with Passkey` option in the app UI.
### 2. Enable Passkey Login
Once passkeys are set up by the user, enable a 'login with passkey' option in the custom login UI of the app. When a user chooses this option to log in, call `loginWithPasskey`. This will bring up the device specific UI to display a list of passkeys linked with the app and let the user select one to onboard the app.
```
import { AuthProvider } from "@arcana/auth"
const auth = new AuthProvider("...")
window.onload = () => {
await auth.init()
}
...
// Display custom login UI with non-passkey login options
...
// Allow user to click log in via one of the options
if !auth.isLoggedIn(){
// Onboard user via non-passkey option
await auth.loginWithSocial({{ no such element: dict object['social_provider'] }});
const userInfo = auth.getUser();
console.log("userInfo.name", userInfo.name);
// Check if the device/browser support passkey login
if auth.isPasskeyLoginSupported(){
// Enable authenticated user to link a passkey with the app
// Post login function
await auth.linkPasskey();
// Post login function
const passkeys = await auth.getMyPasskeys();
console.log({ passkeys });
}
}
// Allow user to choose and log out after passkey linking is done
// Display custom login UI with all onboarding options including passkeys
// User clicks 'login with passkey' option in the UI
if !auth.isLoggedIn(){
// Pre login function
await auth.loginWithPasskey();
...
}
...
```
Developers can also let user view the passkeys linked with the app or website and unlink them, if required.
### List Passkeys
In the authenticated user's context, call `getMyPasskeys` to list all the user passkeys associated with the app.
```
import { AuthProvider } from "@arcana/auth";
const auth = new AuthProvider("...");
window.onload = () => {
await auth.init();
}
if !auth.isLoggedIn(){
// Onboard user via non-passkey option
await auth.loginWithSocial({{ no such element: dict object['social_provider'] }});
const userInfo = auth.getUser();
console.log("userInfo.name", userInfo.name);
// Check if the device/browser support passkey login
if auth.isPasskeyLoginSupported(){
// Enable authenticated user to link a passkey with the app
// Post login function
await auth.linkPasskey();
// Post login function
const passkeys = await auth.getMyPasskeys();
console.log({ passkeys });
}
...
}
```
### Unlink Passkeys
Apps can allow users to unlink the passkeys associated with an app.
To do this, call `getMyPasskeys`in the authenticated user's context. This will list all the passkeys associated with the app. Let the user select a passkey. Specify the id of the selected passkey and call `unlinkPasskey(id)`. This will ensure that on subsequent login attempts, user cannot onboard the app with the unlinked passkey.
```
import { AuthProvider } from "@arcana/auth"
const auth = new AuthProvider("...")
window.onload = () => {
await auth.init()
}
...
// First login / signup
// Display custom login UI with non-passkey login options
...
// Allow user to click log in via one of the options
if !auth.isLoggedIn(){
// Onboard user via non-passkey option
await auth.loginWithSocial({{ no such element: dict object['social_provider'] }});
const userInfo = auth.getUser();
console.log("userInfo.name", userInfo.name);
// Check if the device/browser support passkey login
if auth.isPasskeyLoginSupported(){
// Enable authenticated user to link a passkey with the app
// Post login function
await auth.linkPasskey();
// Post login function
const passkeys = await auth.getMyPasskeys();
console.log({ passkeys });
}
}
// Allow user to choose and log out after passkey linking is done
// Display custom login UI with all onboarding options including passkeys
// User clicks 'login with passkey' option in the UI
// Pre login function
await auth.loginWithPasskey();
...
if !auth.isLoggedIn(){
// Allow user to select passkey and unlink
// Post login function
const passkeys = await auth.getMyPasskeys();
console.log({ passkeys });
// User selects passkey n via device/browser passkey UI
if (passkeys[n]){
// Post login function
await auth.unlinkPasskey(passkey[n]);
}
}
```
**That is all.**
Your dApp is all set for letting users sign-in and login via passkeys.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../concepts/authtype/)
- [Configure Social Providers](../../../../setup/)
- [Arcana Auth SDK Errors](../../../auth-error-msg/)
- [Arcana Auth SDK Usage Guide](../../../auth-usage-guide/)
- [Arcana Auth SDK Reference](https://authsdk-ref-guide.netlify.app/)
# Custom Login UI
Onboard users in a 'RainbowKit' app integrated with the Arcana Auth SDK through a custom login UI.
Plug-and-Play Login UI
You can onboard users in a 'RainbowKit' app faster through the built-in, [plug-and-play login UI](../../../../concepts/plug-and-play-auth/) instead of choosing to build a custom login UI. [Learn more...](../rainbow-pnp-ui/)
## Prerequisites
- [Register](../../../../setup/config-auth/register-app/) the Wagmi app and configure SDK usage [settings for social login](../../../../setup/) providers, [manage app chains](../../../../setup/config-wallet-chains/) and [wallet user experience](../../../../setup/config-wallet/).
- Install the [required SDK packages](../../../sdk-installation/) for 'RainbowKit'.
- [Integrate](../../../integrate/wagmi/) 'RainbowKit' app and create `AuthProvider`, `ArcanaConnector`.
## Steps
### 1. Configure `ArcanaConnector`
`ArcanaConnector` is created earlier as part of SDK integration. When using a custom login UI to onboard users, configure `ArcanaConnector` differently.
Add code in the custom UI for onboarding via social login and passwordless options by using the `setLogin` function.
*Enable Authentication Provider*
```
import { AuthProvider } from "@arcana/auth";
import { ArcanaConnector } from "@arcana/auth-wagmi";
import { polygon, polygonAmoy } from "wagmi/chains";
import { configureChains, createClient, Chain } from "wagmi";
import { publicProvider } from "wagmi/providers/public";
/* Using Custom UI for user login via Google */
const auth = new AuthProvider(`${arcana_client_id}`) // Singleton
export const connector = (chains: Chain[]) => {
return new ArcanaConnector({
chains,
options: {
auth: auth,
login: {
provider: 'google', //See 'Custom Login UI' section in the documentation for other supported providers.
} // Optional, specify here during ArcanaConnector instantiation or in the setLogin function
},
});
};
// Custom UI Alternative
// Use setLogin function after creating the connector.
/*
const auth = new AuthProvider(`${arcana_client_id}`) // Singleton
export const connector = (chains: Chain[]) => {
return new ArcanaConnector({
chains,
options: {
auth: auth
},
});
};
connector.setLogin({
provider: 'google'
})
*/
...
```
*Enable Passwordless Login*
```
import { AuthProvider } from "@arcana/auth";
import { ArcanaConnector } from "@arcana/auth-wagmi";
import { polygon, polygonAmoy } from "wagmi/chains";
import { configureChains, createClient, Chain } from "wagmi";
import { publicProvider } from "wagmi/providers/public";
/* Using Custom UI for Passwordless user login */
const auth = new AuthProvider(`${arcana_client_id}`) // Singleton
export const connector = (chains: Chain[]) => {
return new ArcanaConnector({
chains,
options: {
auth: auth,
login: {
provider: 'passwordless',
email: 'abc@example.com' //optional
} // Optional, specify login details here or during ArcanaConnector instantiation or in the setLogin function
},
});
};
// Custom UI Alternative
// Use setLogin function after creating the connector.
/*
const auth = new AuthProvider(`${arcana_client_id}`) // Singleton
export const connector = (chains: Chain[]) => {
return new ArcanaConnector({
chains,
options: {
auth: auth
},
});
};
connector.setLogin({
provider: 'passwordless',
email: 'abc@example.com' //optional
})
*/
...
```
Single Provider Optimization
When using a single social login provider, specify it when creating ArcanaConnector to optimize onboarding. There's no need to use setLogin later in the custom login UI code.
For multiple social login providers, create ArcanaConnector without specifying a provider. Use the setLogin function later based on the user's choice.
### 2. Set up `WagmiConfig`
Use the `ArcanaConnector` and set up [Wagmi config](https://wagmi.sh/react/getting-started).
```
// Note:
// This sample code is for
// wagmi versions 1.x.x and auth-wagmi 2.0.0
import { configureChains, createConfig, WagmiConfig } from "wagmi";
import { polygon, mainnet, optimism, arbitrum } from "wagmi/chains";
import { publicProvider } from "wagmi/providers/public";
import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { connectors } from "./wallet";
import { useAccount, useConnect } from 'wagmi'
import { Connect } from "./Connect";
const { chains, publicClient } = configureChains(
[mainnet, polygon, optimism, arbitrum],
[publicProvider()]
);
const wagmiEntity = createConfig({
connectors: connectors(chains),
autoConnect: true,
publicClient,
});
...
```
```
// Note:
// This sample code is for
// wagmi versions <1.x.x and auth-wagmi <2.0.0
import "../styles/globals.css";
import "@rainbow-me/rainbowkit/styles.css";
import { configureChains, createClient, WagmiConfig } from "wagmi";
import { polygon, mainnet } from "wagmi/chains";
import { publicProvider } from "wagmi/providers/public";
import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { connectors } from "../utils/wallet";
const { chains, provider } = configureChains(
[mainnet, polygon],
[publicProvider()]
);
const wagmiEntity = createClient({
connectors: connectors(chains),
autoConnect: true,
provider,
});
...
```
### 3. Initialize RainbowKit App Components
```
// Pass wagmi client configured with ArcanaRainbowKitConnector to the RainbowKit Context Provider
export default function App({ Component, pageProps }) {
return (
);
}
```
```
// Pass wagmi client configured with ArcanaRainbowKitConnector to the RainbowKit Context Provider
export default function App({ Component, pageProps }) {
return (
);
}
```
## What's Next?
Use `AuthProvider`, the EIP-1193 provider offered by the SDK, to call supported JSON/RPC functions and [Web3 wallet operations](../../../web3-ops/evm/) in the authenticated user's context.
## See also
- [Arcana Auth SDK Errors](../../../auth-error-msg/)
- [Arcana Auth SDK Usage Guide](../../../auth-usage-guide/)
- [Arcana Auth SDK Reference](https://authsdk-ref-guide.netlify.app/)
- [Arcana Auth Wagmi SDK Reference Guide](https://wagmi-authsdk-ref-guide.netlify.app/)
# Plug-and-Play Login UI
Use the built-in, [plug-and-play login UI modal](../../../../concepts/plug-and-play-auth/) to quickly onboard users in a 'RainbowKit' app integrated with the Arcana Auth Wagmi SDK.
Custom Login UI
You can onboard users through a [custom login UI](../../../../concepts/custom-login-ui/) instead of the [built-in plug-and-play](../../../../concepts/plug-and-play-auth/) one. See [how to use custom login UI](../rainbow-custom-ui/) and onboard users in a 'RainbowKit' app.
## Prerequisites
- [Register](../../../../setup/config-auth/register-app/) the Wagmi app and configure SDK usage [settings for social login](../../../../setup/) providers, [manage app chains](../../../../setup/config-wallet-chains/) and [wallet user experience](../../../../setup/config-wallet/).
- Install the [required SDK packages](../../../sdk-installation/) for 'RainbowKit'.
- [Integrate](../../../integrate/wagmi/) 'RainbowKit' app and create `AuthProvider`, `ArcanaConnector`.
## Steps
### 1. Setup `WagmiConfig`
Use the `ArcanaConnector` created during app integration to set up [Wagmi config](https://wagmi.sh/react/getting-started).
```
//
// For apps using Wagmi versions v2.a.b and auth-wagmi v3.x.y
//
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
import { coinbaseWallet, injected, walletConnect } from 'wagmi/connectors'
import { AuthProvider } from '@arcana/auth'
import { ArcanaConnector } from "@arcana/auth-wagmi"
let auth: AuthProvider | null;
if (!auth) {
auth = new AuthProvider(
"Your-app-Client-ID"
);
}
const connector = new ArcanaConnector({ auth });
export const config = createConfig({
chains: [mainnet, sepolia],
connectors: [
injected(),
coinbaseWallet({ appName: 'Create Wagmi' }),
walletConnect({ projectId: import.meta.env.VITE_WC_PROJECT_ID }),
connector(),
],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})
declare module 'wagmi' {
interface Register {
config: typeof config
}
}
...
```
```
//
// For apps using Wagmi versions v1.x.y and auth-wagmi v2.a.b
//
import { configureChains, createConfig, WagmiConfig } from "wagmi";
import { publicProvider } from "wagmi/providers/public";
import { polygon, polygonAmoy } from "wagmi/chains";
import { useAccount, useConnect, useDisconnect, useBalance } from 'wagmi'
import "../styles/globals.css";
import { AuthProvider } from '@arcana/auth'
import { ArcanaConnector } from "@arcana/auth-wagmi"
let auth: AuthProvider | null;
if (!auth) {
auth = new AuthProvider(
"Your-app-Client-ID"
);
}
const { chains, provider, webSocketProvider } = configureChains(
[mainnet, polygon, polygonAmoy],
[publicProvider()],
{ targetQuorum: 1 }
);
export const connector = (chains: Chain[]) => {
return new ArcanaConnector({
chains,
options: {
auth: auth,
},
});
};
const { chains, publicClient } = configureChains(
[polygon, polygonAmoy],
[publicProvider()]
);
export const wagmiEntity = createConfig({
autoConnect: true,
connectors: [connector(chains)],
publicClient,
});
...
```
### 2. Initialize `RainbowKitProvider`
Specify Wagmi config to initialize `WagmiConfig` component in the app before using the `RainbowKitProvider` component.
```
// Pass wagmi client configured with ArcanaRainbowKitConnector to the RainbowKit Context Provider
export default function App({ Component, pageProps }) {
return (
);
}
```
```
// Pass wagmi client configured with ArcanaRainbowKitConnector to the RainbowKit Context Provider
export default function App({ Component, pageProps }) {
return (
);
}
```
## What's Next?
Use `AuthProvider`, the EIP-1193 provider offered by the SDK, to call supported JSON/RPC functions and [Web3 wallet operations](../../../web3-ops/evm/) in the authenticated user's context.
## See also
**'RainbowKit'** integration example: See \`\`sample-auth-rainbowkit-viem`, `sample-auth-rainbowkit\` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
- [FAQ](../../../../faq/faq-gen/)
- [Troubleshooting Guide](../../../../troubleshooting/)
- [Arcana Auth SDK Errors](../../../auth-error-msg/)
Arcana Auth SDK Quick Links
- [Arcana Auth SDK Reference](https://authsdk-ref-guide.netlify.app/)
- [Release notes](../../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth)
Arcana Auth Wagmi SDK Quick Links
- [Arcana Auth Wagmi SDK Reference Guide](https://wagmi-authsdk-ref-guide.netlify.app/)
- [Release notes](../../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth-wagmi/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth-wagmi)
[Try Demo App](https://demo.arcana.network)
# Plug-and-Play Login UI
Use the built-in, [plug-and-play login UI modal](../../../../concepts/plug-and-play-auth/) to quickly onboard users in a 'React/Next.js' app integrated with the Arcana Auth Wagmi SDK.
Custom Login UI
You can onboard users through a [custom login UI](../../../../concepts/custom-login-ui/) instead of the [built-in plug-and-play](../../../../concepts/plug-and-play-auth/) one. See [how to use custom login UI](../custom-ui/) and onboard users in a 'React/Next.js' app.
## Prerequisites
- [Register](../../../../setup/config-auth/register-app/) the Wagmi app and configure SDK usage [settings for social login](../../../../setup/) providers, [manage app chains](../../../../setup/config-wallet-chains/) and [wallet user experience](../../../../setup/config-wallet/).
- Install the [required SDK packages](../../../sdk-installation/) for 'React/Next.js'.
- [Integrate](../../../integrate/react-nextjs/) 'React/Next.js' app, create and initialize the `AuthProvider`.
## Steps
```
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { AuthProvider } from "@arcana/auth";
import { ProvideAuth } from "@arcana/auth-react";
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
const provider = new AuthProvider(
"xar_live_d7c88d9b033d100e4200d21a5c4897b896e60063",
{
network: "mainnet",
theme: "light",
connectOptions: {
compact: true,
},
chainConfig: {
chainId: "80001"
}
}
); //See SDK Reference Guide for optional parameters
root.render(
);
```
```
import { Auth } from "@arcana/auth-react";
// Use to use the built-in, plug & play login UI
function App() {
const [theme, setTheme] = React.useState("light");
return (
;
}
if (!isLoggedIn) {
return (
);
}
}
export default App
```
The figure below shows the built-in login UI plug-and-play pop-up authentication screen for a test app.
Plug-and-play Login UI
Compact Mode
While creating the `AuthProvider`, use `connectoOptions` to optionally choose the [compact mode](../../../../concepts/plug-and-play-auth/#compact-modal) for the plug-and-play login UI.
```
connectOptions: {
compact: true // default - false
},
```
Login UI Options
No plug-and-play support for Firebase authentication.
The [plug and play feature](../../../../concepts/plug-and-play-auth/) of the Arcana Auth SDK does not support social login via Firebase. Developers must build a custom login UI and add code to onboard users. For details, see [onboarding users via Firebase and custom login UI](../custom-ui/build-idm/firebase-login/)
No plug-and-play support for Telegram authentication.
The [plug and play feature](../../../../concepts/plug-and-play-auth/) of the Arcana Auth SDK does not support social login via Telegram. Developers must build a custom login UI and add code to onboard users. For details, see \[\[{{ no such element: dict object['telegram_custom_ui_tag'] }}|onboarding users via Telegram and custom login UI\]\].
## What's Next?
Use `AuthProvider`, the EIP-1193 provider offered by the SDK, to call supported JSON/RPC functions and [Web3 wallet operations](../../../web3-ops/evm/) in the authenticated user's context.
## See also
**'React/Next.js'** integration example: See `sample-auth-react`,`sample-auth-nextjs` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
- [FAQ](../../../../faq/faq-gen/)
- [Troubleshooting Guide](../../../../troubleshooting/)
- [Arcana Auth SDK Errors](../../../auth-error-msg/)
Arcana Auth SDK Quick Links
- [Arcana Auth SDK Reference](https://authsdk-ref-guide.netlify.app/)
- [Release notes](../../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth)
Arcana Auth Wagmi SDK Quick Links
- [Arcana Auth Wagmi SDK Reference Guide](https://wagmi-authsdk-ref-guide.netlify.app/)
- [Release notes](../../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth-wagmi/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth-wagmi)
[Try Demo App](https://demo.arcana.network)
# Custom Login UI
[Enable Passwordless Auth](build-pwdless-auth/)
[Social Login Providers](build-social/)
[IAM Providers](build-idm/)
# Build Passwordless Auth
Learn how React/Next.js app can use custom login UI and allow users to onboard via passwordless login option.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- The app must be [registered using the Arcana Developer Dashboard](../../../../../setup/config-auth/register-app/) and a unique Client ID must be already assigned to it. This Client ID is essential for integrating the app with the Arcana Auth SDK
- Follow the instructions to [integrate the React app](../../../../integrate/react-nextjs/) with the Arcana Auth SDK and initialize the `AuthProvider` instance.
No Setup Required for Passwordless
Passwordless login does **not** require any configuration setup through the Arcana Developer Dashboard. When prompted, app users must supply an email ID to receive the OTP for logging into the app. On receiving the OTP in email, user must provide the same in the app to authenticate and access the in-app Arcana wallet to sign transactions.
## Steps
`useAuth() hook`
Use `loginWithLink` (deprecated) `loginWithOTPStart` and `loginWithOTPComplete` through the `useAuth` hook offered by the Arcana Auth React SDK and trigger passwordless login to onboard the users.
### Login with link
```
await auth.loginWithLink(`${email}`)
```
Deprecated
`loginWithLink` is deprecated.
Use `loginWithOTPStart`, `loginWithOTPComplete` for passwordless login with OTP. The OTP will be received via email supplied in `loginWithOTPStart` call.
### Login with OTP
```
try {
const loginState = await auth.loginWithOTPStart("john.doe@somemail.com");
await loginState.begin()
if(loginState.isCompleteRequired) {
// App is using default app-specific keys
// App must ask the user to input a 6-digit code received in mail
var userInput = prompt("Please enter a 6-digit code:", "111111");
// Validate if the input is a 6-digit code
if (userInput !== null &&
userInput.length === 6 &&
!isNaN(userInput)) {
const complete = await auth.loginWithOTPComplete(
userInput,
onMFARequired() => {
//Hide overlay, if used in the app
});
console.log("complete:",complete);
} else {
console.log("Invalid input. Please enter a valid 6-digit code.");
}
} else {
// App is using global keys, built-in OTP input UI is displayed by the SDK
// App is not required to add code for OTP input
}
} catch (e) {
console.log(e);
}
```
Global vs. App Specific Keys
Apps using app-specific keys must use a custom login UI that allows users to input the OTP. In this case, the `isCompleteRequired` boolean returns `true` after initiating login with OTP.
Apps using global keys are not required to use a custom login UI. A built-in login UI is automatically displayed for the user for OTP. Users must enter the OTP received via email in this UI.
MFA Enabled / Disabled
During passwordless login via OTP, apps configured for MFA and those using overlays must hide it to enable OTP input. Use the `isMFARequired` callback in the `loginWithOTPComplete` method to hide the overlay.
## What's Next?
Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../web3-ops/evm/)
## See also
**React/Next.js** integration example: See `sample-auth-react`,`sample-auth-nextjs` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
- [FAQ](../../../../../faq/faq-gen/)
- [Troubleshooting Guide](../../../../../troubleshooting/)
- [Arcana Auth SDK Errors](../../../../auth-error-msg/)
- [Arcana Auth SDK Usage Guide](../../../../auth-usage-guide/)
- [Arcana Auth React SDK Reference](https://auth-react-sdk-ref-guide.netlify.app/)
Arcana Auth SDK Quick Links
- [Arcana Auth SDK Reference](https://authsdk-ref-guide.netlify.app/)
- [Release notes](../../../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth)
Arcana Auth React SDK Quick Links
- [Arcana Auth React SDK Reference Guide](https://auth-react-sdk-ref-guide.netlify.app/)
- [Arcana Auth SDK Reference](https://authsdk-ref-guide.netlify.app/)
- [Arcana Auth SDK Release notes](../../../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth-react/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth-react)
[Try Demo App](https://demo.arcana.network)
# IAM Provider: Custom Login UI
Developers can choose to **not** use the plug-and-play login UI and instead build a custom login UI to onboard users.
In this case, developers must build custom login UI themselves after configuring the IAM Providers in the Arcana Developer Dashboard. This custom login UI must call appropriate user onboarding functions offered by the Arcana Auth SDK for every configured IAM provider.
[Cognito](cognito-oauth/)
[Firebase](firebase-login/)
# User Login with Cognito
In this guide, you will learn how a React/Next.js app integrated with the Arcana Auth SDK and Arcana Auth React SDK can onboard users with a custom login UI through Cognito authentication.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- Carefully [follow the instructions to configure Cognito](../../../../../../setup/config-idm/cognito-oauth/) as the authentication provider.
- Use the instructions and [integrate the React app](../../../../../integrate/react-nextjs/) with the Arcana Auth SDK and the Arcana Auth React SDK before adding code to onboard users.
## Steps
*Using Cognito to onboard users in a React/Next.js app requires a single line of code.*
## Step 1: Use `loginWithSocial`
App.js
```
import { useAuth } from "@arcana/auth-react";
function App() {
const { loading, isLoggedIn, loginWithSocial } = useAuth()
// custom login UI
const onConnectClick = async () => {
try {
await loginWithSocial('aws');
} catch (err) {
console.log({ err });
// Handle error
}
};
if (loading) {
return
Loading...
;
}
if (!isLoggedIn) {
return (
);
}
}
export default App
```
**That is all.**
The React/Next.js app is all set for onboarding users via Cognito.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/).
- [Arcana Auth React SDK Reference Guide](https://auth-react-sdk-ref-guide.netlify.app/)
- [Handling authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# User Login with Firebase
In this guide, you will learn how a React/Next.js app integrated with the Arcana Auth SDK and Firebase SDK can onboard users via custom login UI and Firebase as the authentication provider.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- Carefully [follow the instructions to configure Firebase](../../../../../../setup/config-idm/firebase-auth/) as the authentication provider.
- Install the Firebase SDK and integrate the app as explained in the Firebase documentation for [iOS apps](https://firebase.google.com/docs/ios/setup), [Android apps](https://firebase.google.com/docs/android/setup) and [web apps](https://firebase.google.com/docs/web/setup). Use [Firebase authentication](https://firebase.google.com/docs/auth) as per the Web3 app type, mobile or web app. Once a user is authenticated by Firebase, the developer must obtain the token and user identifier and provide it as input to the `loginWithBearer` function of the Arcana Auth SDK for onboarding users to Web3.
- Install the Arcana Auth SDK and [integrate the app](../../../../../integrate/vanilla-html-css-js/) with the Arcana Auth SDK by using the appropriate integration method as per the app type. After that follow the steps listed below and add code to onboard users to Web3 and enable them to sign blockchain transactions.
## Steps
*Using Firebase to onboard users in a Web3 app that is integrated with the Arcana Auth SDK requires a single line of code.*
### Call `loginWithBearer` function
Make sure that all the prerequisites listed above are met. The app should be successfully registered, configured, and integrated with both the Firebase SDK as well as the Arcana Auth SDK, before adding code to onboard users via Firebase.
App.vue
```
import { initializeApp } from 'firebase/app'
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from 'firebase/auth'
import { AuthProvider, BearerAuthentication } from '@arcana/auth'
const config = {
apiKey: "AIzaSyBddysLWM9CcpNEVLbUz52YwyQL_uytQX0", // Obtain this after registering app at Firebase console
authDomain: "arc4n4-docx.firebaseapp.com", // Project ID Domain setting in the Firebase console
projectId: "some-projectid-example-arc4n4-docx",
storageBucket: "some-storage-arc4n4-docx.appspot.com",
messagingSenderId: "2xxxx318486297382",
appId: "4:3184ddddddd7382:web:8b639axxxxxxxx39f85fe7",
measurementId: "G-EGccccccLDR"
};
const firebaseApp = initializeApp(config)
const firebaseAuth = getAuth(firebaseApp)
//Create Arcana Auth Provider
// Get client ID 'xar_live_xxxxxx' from Arcana Developer Dashboard
const auth = new AuthProvider("xar_live_123940ytyoxxxxxxx343o404",{
network: "mainnet", //change it to testnet or mainnet
})
export default {
name: 'App',
data: () => ({
email: '',
password: ''
}),
mounted () {
AP.init().then((k) => console.log(k)).catch(e => console.error(e)) //Initialize the Auth Provider
},
methods: {
async ultimate (upm) {
if (await AP.isLoggedIn()) {
window.alert('Already logged in')
return
}
await auth.loginWithBearer(BearerAuthentication.firebase, {
uid: upm.user.uid,
token: upm.user.accessToken
})
},
async login () { //Sign in existing Firebase users
const data = await signInWithEmailAndPassword(firebaseAuth, this.email, this.password)
console.log('Data:', data)
return this.ultimate(data)
},
async register () { //Sign up new users with Firebase Auth
const data = await createUserWithEmailAndPassword(firebaseAuth, this.email, this.password)
console.log('Data:', data)
return this.ultimate(data)
}
}
}
...
```
Refer to the [Sample Firebase Vue app integration example](https://github.com/arcana-network/auth-examples) to see how the `loginWithBearer` function is used.
After onboarding users, developers can add code to access the other Arcana Auth SDK functions in the app. See [Arcana Auth SDK Usage Guide](../../../../../auth-usage-guide/) for details.
**That is all.**
Your app is all set for authenticating users via Firebase. Authenticated users can instantly access the Arcana wallet to sign blockchain transactions.
No Aggregate Login with Firebase
The [aggregate login feature](../../../../../../concepts/aggregatelogin/) does not work for third-party IAM providers such as Firebase.
If a user has the same email ID registered with say a social login provider and with Firebase, logging into an app using Firebase will create a new unique user account even if the user uses the same email as the one used with a social login provider or via the passwordless option. What this means is that the wallet address for the same user will be different when Firebase is used to log in and subsequently a social login provider or passwordless login is used by the same user having the same email ID.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/)
- [Handing authentication errors](../../../../../auth-error-msg/)
- [Get Firebase User token](https://firebase.google.com/docs/reference/js/auth.user.md#usergetidtoken)
- [Using Firebase Auth](https://firebase.google.com/docs/auth)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# Social Login Providers: Custom Login UI
Developers can choose to **not** use the plug-and-play login UI and instead build a custom login UI to onboard users.
In this case, developers must build custom login UI themselves after configuring the social login providers in the Arcana Developer Dashboard. This custom login UI must call appropriate user onboarding functions offered by the Arcana Auth SDK for configured social login providers.
[Apple](apple-oauth/)
[Discord](discord-oauth/)
[GitHub](github-oauth/)
[Google](google-oauth/)
[Steam](steam-oauth/)
[Telegram](telegram-oauth/)
[Twitch](twitch-oauth/)
[Twitter](twitter-oauth/)
# User Login with Apple
In this guide, you will learn how a React/Next.js app integrated with the Arcana Auth SDK and Arcana Auth React SDK can onboard users with a custom login UI through Apple authentication.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- Carefully [follow the instructions to configure Apple](../../../../../../setup/config-social/apple-oauth/) as the authentication provider.
- Use the instructions and [integrate the React app](../../../../../integrate/react-nextjs/) with the Arcana Auth SDK and the Arcana Auth React SDK before adding code to onboard users.
## Steps
*Using Apple to onboard users in a React/Next.js app requires a single line of code.*
## Step 1: Use `loginWithSocial`
App.js
```
import { useAuth } from "@arcana/auth-react";
function App() {
const { loading, isLoggedIn, loginWithSocial } = useAuth()
// custom login UI
const onConnectClick = async () => {
try {
await loginWithSocial('apple');
} catch (err) {
console.log({ err });
// Handle error
}
};
if (loading) {
return
Loading...
;
}
if (!isLoggedIn) {
return (
);
}
}
export default App
```
**That is all.**
The React/Next.js app is all set for onboarding users via Apple.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/).
- [Arcana Auth React SDK Reference Guide](https://auth-react-sdk-ref-guide.netlify.app/)
- [Handling authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# User Login with Discord
In this guide, you will learn how a React/Next.js app integrated with the Arcana Auth SDK and Arcana Auth React SDK can onboard users with a custom login UI through Discord authentication.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- Carefully [follow the instructions to configure Discord](../../../../../../setup/config-social/discord-oauth/) as the authentication provider.
- Use the instructions and [integrate the React app](../../../../../integrate/react-nextjs/) with the Arcana Auth SDK and the Arcana Auth React SDK before adding code to onboard users.
## Steps
*Using Discord to onboard users in a React/Next.js app requires a single line of code.*
## Step 1: Use `loginWithSocial`
App.js
```
import { useAuth } from "@arcana/auth-react";
function App() {
const { loading, isLoggedIn, loginWithSocial } = useAuth()
// custom login UI
const onConnectClick = async () => {
try {
await loginWithSocial('discord');
} catch (err) {
console.log({ err });
// Handle error
}
};
if (loading) {
return
Loading...
;
}
if (!isLoggedIn) {
return (
);
}
}
export default App
```
**That is all.**
The React/Next.js app is all set for onboarding users via Discord.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/).
- [Arcana Auth React SDK Reference Guide](https://auth-react-sdk-ref-guide.netlify.app/)
- [Handling authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# User Login with GitHub
In this guide, you will learn how a React/Next.js app integrated with the Arcana Auth SDK and Arcana Auth React SDK can onboard users with a custom login UI through GitHub authentication.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- Carefully [follow the instructions to configure GitHub](../../../../../../setup/config-social/github-oauth/) as the authentication provider.
- Use the instructions and [integrate the React app](../../../../../integrate/react-nextjs/) with the Arcana Auth SDK and the Arcana Auth React SDK before adding code to onboard users.
## Steps
*Using GitHub to onboard users in a React/Next.js app requires a single line of code.*
## Step 1: Use `loginWithSocial`
App.js
```
import { useAuth } from "@arcana/auth-react";
function App() {
const { loading, isLoggedIn, loginWithSocial } = useAuth()
// custom login UI
const onConnectClick = async () => {
try {
await loginWithSocial('github');
} catch (err) {
console.log({ err });
// Handle error
}
};
if (loading) {
return
Loading...
;
}
if (!isLoggedIn) {
return (
);
}
}
export default App
```
**That is all.**
The React/Next.js app is all set for onboarding users via GitHub.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/).
- [Arcana Auth React SDK Reference Guide](https://auth-react-sdk-ref-guide.netlify.app/)
- [Handling authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# User Login with Google
In this guide, you will learn how a React/Next.js app integrated with the Arcana Auth SDK and Arcana Auth React SDK can onboard users with a custom login UI through Google authentication.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- Carefully [follow the instructions to configure Google](../../../../../../setup/config-social/google-oauth/) as the authentication provider.
- Use the instructions and [integrate the React app](../../../../../integrate/react-nextjs/) with the Arcana Auth SDK and the Arcana Auth React SDK before adding code to onboard users.
## Steps
*Using Google to onboard users in a React/Next.js app requires a single line of code.*
## Step 1: Use `loginWithSocial`
App.js
```
import { useAuth } from "@arcana/auth-react";
function App() {
const { loading, isLoggedIn, loginWithSocial } = useAuth()
// custom login UI
const onConnectClick = async () => {
try {
await loginWithSocial('google');
} catch (err) {
console.log({ err });
// Handle error
}
};
if (loading) {
return
Loading...
;
}
if (!isLoggedIn) {
return (
);
}
}
export default App
```
**That is all.**
The React/Next.js app is all set for onboarding users via Google.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/).
- [Arcana Auth React SDK Reference Guide](https://auth-react-sdk-ref-guide.netlify.app/)
- [Handling authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# User Login with Steam
In this guide, you will learn how a React/Next.js app integrated with the Arcana Auth SDK and Arcana Auth React SDK can onboard users with a custom login UI through Steam authentication.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- Carefully [follow the instructions to configure Steam](../../../../../../setup/config-social/steam-oauth/) as the authentication provider.
- Use the instructions and [integrate the React app](../../../../../integrate/react-nextjs/) with the Arcana Auth SDK and the Arcana Auth React SDK before adding code to onboard users.
## Steps
*Using Steam to onboard users in a React/Next.js app requires a single line of code.*
## Step 1: Use `loginWithSocial`
App.js
```
import { useAuth } from "@arcana/auth-react";
function App() {
const { loading, isLoggedIn, loginWithSocial } = useAuth()
// custom login UI
const onConnectClick = async () => {
try {
await loginWithSocial('steam');
} catch (err) {
console.log({ err });
// Handle error
}
};
if (loading) {
return
Loading...
;
}
if (!isLoggedIn) {
return (
);
}
}
export default App
```
**That is all.**
The React/Next.js app is all set for onboarding users via Steam.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/).
- [Arcana Auth React SDK Reference Guide](https://auth-react-sdk-ref-guide.netlify.app/)
- [Handling authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# User Login with Telegram
In this guide, you will learn how a React/Next.js app integrated with the Arcana Auth SDK and Arcana Auth React SDK can onboard users with a custom login UI through Telegram authentication.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- Carefully [follow the instructions to configure Telegram](../../../../../../setup/config-social/telegram-oauth/) as the authentication provider.
- Use the instructions and [integrate the React app](../../../../../integrate/react-nextjs/) with the Arcana Auth SDK and the Arcana Auth React SDK before adding code to onboard users.
## Steps
*Using Telegram to onboard users in a React/Next.js app requires a single line of code.*
## Step 1: Use `loginWithSocial`
App.js
```
import { useAuth } from "@arcana/auth-react";
function App() {
const { loading, isLoggedIn, loginWithSocial } = useAuth()
// custom login UI
const onConnectClick = async () => {
try {
await loginWithSocial('telegram');
} catch (err) {
console.log({ err });
// Handle error
}
};
if (loading) {
return
Loading...
;
}
if (!isLoggedIn) {
return (
);
}
}
export default App
```
**That is all.**
The React/Next.js app is all set for onboarding users via Telegram.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/).
- [Arcana Auth React SDK Reference Guide](https://auth-react-sdk-ref-guide.netlify.app/)
- [Handling authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# User Login with Twitch
In this guide, you will learn how a React/Next.js app integrated with the Arcana Auth SDK and Arcana Auth React SDK can onboard users with a custom login UI through Twitch authentication.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- Carefully [follow the instructions to configure Twitch](../../../../../../setup/config-social/twitch-oauth/) as the authentication provider.
- Use the instructions and [integrate the React app](../../../../../integrate/react-nextjs/) with the Arcana Auth SDK and the Arcana Auth React SDK before adding code to onboard users.
## Steps
*Using Twitch to onboard users in a React/Next.js app requires a single line of code.*
## Step 1: Use `loginWithSocial`
App.js
```
import { useAuth } from "@arcana/auth-react";
function App() {
const { loading, isLoggedIn, loginWithSocial } = useAuth()
// custom login UI
const onConnectClick = async () => {
try {
await loginWithSocial('twitch');
} catch (err) {
console.log({ err });
// Handle error
}
};
if (loading) {
return
Loading...
;
}
if (!isLoggedIn) {
return (
);
}
}
export default App
```
**That is all.**
The React/Next.js app is all set for onboarding users via Twitch.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/).
- [Arcana Auth React SDK Reference Guide](https://auth-react-sdk-ref-guide.netlify.app/)
- [Handling authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# User Login with Twitter
In this guide, you will learn how a React/Next.js app integrated with the Arcana Auth SDK and Arcana Auth React SDK can onboard users with a custom login UI through Twitter authentication.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- Carefully [follow the instructions to configure Twitter](../../../../../../setup/config-social/twitter-oauth/) as the authentication provider.
- Use the instructions and [integrate the React app](../../../../../integrate/react-nextjs/) with the Arcana Auth SDK and the Arcana Auth React SDK before adding code to onboard users.
## Steps
*Using Twitter to onboard users in a React/Next.js app requires a single line of code.*
## Step 1: Use `loginWithSocial`
App.js
```
import { useAuth } from "@arcana/auth-react";
function App() {
const { loading, isLoggedIn, loginWithSocial } = useAuth()
// custom login UI
const onConnectClick = async () => {
try {
await loginWithSocial('twitter');
} catch (err) {
console.log({ err });
// Handle error
}
};
if (loading) {
return
Loading...
;
}
if (!isLoggedIn) {
return (
);
}
}
export default App
```
**That is all.**
The React/Next.js app is all set for onboarding users via Twitter.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/).
- [Arcana Auth React SDK Reference Guide](https://auth-react-sdk-ref-guide.netlify.app/)
- [Handling authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# Plug-and-Play Login UI
Use the built-in, [plug-and-play login UI modal](../../../../concepts/plug-and-play-auth/) to quickly onboard users in a 'Vanilla HTML/CSS/JS' app integrated with the Arcana Auth Wagmi SDK.
Custom Login UI
You can onboard users through a [custom login UI](../../../../concepts/custom-login-ui/) instead of the [built-in plug-and-play](../../../../concepts/plug-and-play-auth/) one. See [how to use custom login UI](../custom-ui/) and onboard users in a 'Vanilla HTML/CSS/JS' app.
## Prerequisites
- [Register](../../../../setup/config-auth/register-app/) the app that uses `wagmi` and configure the SDK usage [settings for social login](../../../../setup/) providers, [manage app chains](../../../../setup/config-wallet-chains/) and [wallet user experience](../../../../setup/config-wallet/).
- Install the [required SDK packages](../../../sdk-installation/) for 'Vanilla HTML/CSS/JS'.
- [Integrate](../../../integrate/wagmi/) 'Vanilla HTML/CSS/JS' app, create and initialize the `AuthProvider`.
## Steps
### 1. `connect`
Use the `connect()` function to bring up the plug-and-play pop-up modal in the app context and display the available options for user onboarding. Only those options are displayed that were earlier configured by the developer using the Arcana Developer Dashboard. The passwordless login option is enabled by default.
```
await auth.connect();
```
Plug-and-Play Login UI
Compact Mode
While creating the `AuthProvider`, use `connectoOptions` to optionally choose the [compact mode](../../../../concepts/plug-and-play-auth/#compact-modal) for the plug-and-play login UI.
```
connectOptions: {
compact: true // default - false
},
```
Login UI Options
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use..
No plug-and-play support for Firebase authentication.
The [plug and play feature](../../../../concepts/plug-and-play-auth/) of the Arcana Auth SDK does not support social login via Firebase. Developers must build a custom login UI and add code to onboard users. For details, see [onboarding users via Firebase and custom login UI](../custom-ui/build-idm/firebase-login/)
No plug-and-play support for Telegram authentication.
The [plug and play feature](../../../../concepts/plug-and-play-auth/) of the Arcana Auth SDK does not support social login via Telegram. Developers must build a custom login UI and add code to onboard users. For details, see \[\[{{ no such element: dict object['telegram_custom_ui_tag'] }}|onboarding users via Telegram and custom login UI\]\].
## What's Next?
Use `AuthProvider`, the EIP-1193 provider offered by the SDK, to call supported JSON/RPC functions and [Web3 wallet operations](../../../web3-ops/evm/) in the authenticated user's context.
## See also
**'Vanilla HTML/CSS/JS'** integration example: See `sample-auth-html-css-js` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
- [FAQ](../../../../faq/faq-gen/)
- [Troubleshooting Guide](../../../../troubleshooting/)
- [Arcana Auth SDK Errors](../../../auth-error-msg/)
Arcana Auth SDK Quick Links
- [Arcana Auth SDK Reference](https://authsdk-ref-guide.netlify.app/)
- [Release notes](../../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth)
[Try Demo App](https://demo.arcana.network)
# Custom Login UI
[Passwordless Auth](build-pwdless-auth/)
[Social Providers](build-social/)
[IAM Providers](build-idm/)
Refer to the [Auth Examples](https://github.com/arcana-network/auth-examples) for sample applications that use custom login UI to onboard users.
# Build Custom Passwordless Auth
In this guide, you will learn how to integrate 'Vanilla HTML/CSS/JS' app with the Arcana Auth SDK and then onboard users through custom login UI and passwordless login option.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- The app must be [registered using the Arcana Developer Dashboard](../../../../../setup/config-auth/register-app/). A unique Client ID is assigned after app registration. It is required for integrating the app with the Arcana Auth SDK
- Follow the instructions as per the app type and [integrate the app](../../../../integrate/vanilla-html-css-js/) with the Arcana Auth SDK.
Configuring App
Unlike other user onboarding options that require enabling authentication providers, passwordless login can be enabled without any configuration setup using the Arcana Developer Dashboard.
Developers can optionally choose to modify the default settings for branding and the Arcana wallet settings in the Arcana Developer Dashboard.
## Steps
*Follow these steps for enabling passwordless login in a Web3 app that is integrated with the Arcana Auth SDK.*
After integrating the app, add the code to onboard users in a passwordless manner using the SDK method listed below.
App users must supply an email ID to receive the OTP for logging into the app. An OTP is sent to the specified email ID. When the user provides the same OTP in the app context, authentication is complete and a wallet address is assigned to the user.
### Login with link
```
await auth.loginWithLink(`${email}`)
```
Deprecated
`loginWithLink` is deprecated.
Use `loginWithOTPStart`, `loginWithOTPComplete` for passwordless login with OTP. The OTP will be received via email supplied in `loginWithOTPStart` call.
### Login with OTP
```
try {
const loginState = await auth.loginWithOTPStart("john.doe@somemail.com");
await loginState.begin()
if(loginState.isCompleteRequired) {
// App is using default app-specific keys
// App must ask the user to input a 6-digit code received in mail
var userInput = prompt("Please enter a 6-digit code:", "111111");
// Validate if the input is a 6-digit code
if (userInput !== null &&
userInput.length === 6 &&
!isNaN(userInput)) {
const complete = await auth.loginWithOTPComplete(
userInput,
onMFARequired() => {
//Hide overlay, if used in the app
});
console.log("complete:",complete);
} else {
console.log("Invalid input. Please enter a valid 6-digit code.");
}
} else {
// App is using global keys, built-in OTP input UI is displayed by the SDK
// App is not required to add code for OTP input
}
} catch (e) {
console.log(e);
}
```
Global vs. App Specific Keys
Apps using app-specific keys must use a custom login UI that allows users to input the OTP. In this case, the `isCompleteRequired` boolean returns `true` after initiating login with OTP.
Apps using global keys are not required to use a custom login UI. A built-in login UI is automatically displayed for the user for OTP. Users must enter the OTP received via email in this UI.
MFA Enabled / Disabled
During passwordless login via OTP, apps configured for MFA and those using overlays must hide it to enable OTP input. Use the `isMFARequired` callback in the `loginWithOTPComplete` method to hide the overlay.
Check if the user has logged in successfully:
```
const connected = await auth.isLoggedIn()
```
Log out the dApp user when requested:
```
await auth.logout()
```
**That is all.**
Your dApp is all set for onboarding users via the passwordless login option.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../concepts/authtype/)
- [Configure Social Providers](../../../../../setup/)
- [Arcana Auth SDK Errors](../../../../auth-error-msg/)
- [Arcana Auth SDK Usage Guide](../../../../auth-usage-guide/)
- [Arcana Auth SDK Reference](https://authsdk-ref-guide.netlify.app/)
# IAM Providers: Custom Login UI
Developers can choose to **not** use Arcana's plug-and-play login UI for third-party IAM providers and instead build a custom login UI to onboard users.
In this case, developers must build the custom login UI themselves after configuring the IAM providers in the Arcana Developer Dashboard . This custom login UI must call appropriate user onboarding functions offered by the Arcana Auth SDK for the third-party IAM providers.
[Cognito](cognito-oauth/)
[Firebase](firebase-login/)
# User Login with AWS Cognito
In this guide, you will learn how a Vanilla HTML/CSS/JS app integrated with the Arcana Auth SDK can onboard users via custom login UI and AWS Cognito as the authentication provider.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- Carefully [follow the instructions to configure AWS Cognito](../../../../../../setup/config-idm/cognito-oauth/) as the authentication provider.
- Use the appropriate integration method as per the app type and [integrate the app](../../../../../integrate/vanilla-html-css-js/) with the Arcana Auth SDK before accessing the user onboarding function of the Arcana Auth SDK.
## Steps
*Using AWS Cognito to onboard users in a Web3 app that is integrated with the Arcana Auth SDK requires a single line of code.*
### Call `loginWithSocial` function
Make sure that all the prerequisites listed above are met. The app should be successfully registered, configured, and integrated with the Arcana Auth SDK, before adding code to onboard users via AWS Cognito.
```
await auth.loginWithSocial('aws')
```
Check if a user is logged in:
```
const connected = await auth.isLoggedIn()
```
After onboarding users, developers can add code to access the other Arcana Auth SDK functions in the app. See [Arcana Auth SDK Usage Guide](../../../../../auth-usage-guide/) for details.
Add code in the application to log out an authenticated user:
```
await auth.logout()
```
**That is all.**
Your app is all set for authenticating users via AWS Cognito. Authenticated users can instantly access the Arcana wallet to sign blockchain transactions.
Apps using IAM Providers
Apps usually use Arcana Auth SDK for user onboarding and blockchain transaction signing. Authentication providers must be set up in the Arcana Developer Dashboard before integrating with the SDK.
Some apps might use third-party IAM providers like AWS Cognito for authentication but still use Arcana Auth SDK to access Arcana wallet. The setup is different since third-party IAM providers support authentication verifiers like Google directly.
Developers only need to set up the IAM provider in the Arcana Developer Dashboard. They don't need to configure authentication verifiers that work directly with the IAM providers. Use the IAM provider's console, like Cognito Developer Console, to set up authentication verifiers like Google, not the Arcana Developer Dashboard.
No Aggregate Login with Cognito
The [aggregate login feature](../../../../../../concepts/aggregatelogin/) does not work for the third-party IAM providers such as Cognito.
If a user has the same email ID registered with say a social login provider and with Cognito, logging into an app using Cognito will create a new unique user account even if the user uses the same email as the one used with a social login provider or via the passwordless option. What this means is that the wallet address for the same user will be different when Cognito is used to log in and subsequently a social login provider or passwordless login is used by the same user having the same email ID.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/)
- [Handing authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# User Login with Firebase
In this guide, you will learn how a Vanilla HTML/CSS/JS app integrated with the Arcana Auth SDK and Firebase SDK can onboard users via custom login UI and Firebase as the authentication provider.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- Carefully [follow the instructions to configure Firebase](../../../../../../setup/config-idm/firebase-auth/) as the authentication provider.
- Install the Firebase SDK and integrate the app as explained in the Firebase documentation for [iOS apps](https://firebase.google.com/docs/ios/setup), [Android apps](https://firebase.google.com/docs/android/setup) and [web apps](https://firebase.google.com/docs/web/setup). Use [Firebase authentication](https://firebase.google.com/docs/auth) as per the Web3 app type, mobile or web app. Once a user is authenticated by Firebase, the developer must obtain the token and user identifier and provide it as input to the `loginWithBearer` function of the Arcana Auth SDK for onboarding users to Web3.
- Install the Arcana Auth SDK and [integrate the app](../../../../../integrate/vanilla-html-css-js/) with the Arcana Auth SDK by using the appropriate integration method as per the app type. After that follow the steps listed below and add code to onboard users to Web3 and enable them to sign blockchain transactions.
## Steps
*Using Firebase to onboard users in a Web3 app that is integrated with the Arcana Auth SDK requires a single line of code.*
### Call `loginWithBearer` function
Make sure that all the prerequisites listed above are met. The app should be successfully registered, configured, and integrated with both the Firebase SDK as well as the Arcana Auth SDK, before adding code to onboard users via Firebase.
App.vue
```
import { initializeApp } from 'firebase/app'
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from 'firebase/auth'
import { AuthProvider, BearerAuthentication } from '@arcana/auth'
const config = {
apiKey: "AIzaSyBddysLWM9CcpNEVLbUz52YwyQL_uytQX0", // Obtain this after registering app at Firebase console
authDomain: "arc4n4-docx.firebaseapp.com", // Project ID Domain setting in the Firebase console
projectId: "some-projectid-example-arc4n4-docx",
storageBucket: "some-storage-arc4n4-docx.appspot.com",
messagingSenderId: "2xxxx318486297382",
appId: "4:3184ddddddd7382:web:8b639axxxxxxxx39f85fe7",
measurementId: "G-EGccccccLDR"
};
const firebaseApp = initializeApp(config)
const firebaseAuth = getAuth(firebaseApp)
//Create Arcana Auth Provider
// Get client ID 'xar_live_xxxxxx' from Arcana Developer Dashboard
const auth = new AuthProvider("xar_live_123940ytyoxxxxxxx343o404",{
network: "mainnet", //change it to testnet or mainnet
})
export default {
name: 'App',
data: () => ({
email: '',
password: ''
}),
mounted () {
AP.init().then((k) => console.log(k)).catch(e => console.error(e)) //Initialize the Auth Provider
},
methods: {
async ultimate (upm) {
if (await AP.isLoggedIn()) {
window.alert('Already logged in')
return
}
await auth.loginWithBearer(BearerAuthentication.firebase, {
uid: upm.user.uid,
token: upm.user.accessToken
})
},
async login () { //Sign in existing Firebase users
const data = await signInWithEmailAndPassword(firebaseAuth, this.email, this.password)
console.log('Data:', data)
return this.ultimate(data)
},
async register () { //Sign up new users with Firebase Auth
const data = await createUserWithEmailAndPassword(firebaseAuth, this.email, this.password)
console.log('Data:', data)
return this.ultimate(data)
}
}
}
...
```
Refer to the [Sample Firebase Vue app integration example](https://github.com/arcana-network/auth-examples) to see how the `loginWithBearer` function is used.
After onboarding users, developers can add code to access the other Arcana Auth SDK functions in the app. See [Arcana Auth SDK Usage Guide](../../../../../auth-usage-guide/) for details.
**That is all.**
Your app is all set for authenticating users via Firebase. Authenticated users can instantly access the Arcana wallet to sign blockchain transactions.
No Aggregate Login with Firebase
The [aggregate login feature](../../../../../../concepts/aggregatelogin/) does not work for third-party IAM providers such as Firebase.
If a user has the same email ID registered with say a social login provider and with Firebase, logging into an app using Firebase will create a new unique user account even if the user uses the same email as the one used with a social login provider or via the passwordless option. What this means is that the wallet address for the same user will be different when Firebase is used to log in and subsequently a social login provider or passwordless login is used by the same user having the same email ID.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/)
- [Handing authentication errors](../../../../../auth-error-msg/)
- [Get Firebase User token](https://firebase.google.com/docs/reference/js/auth.user.md#usergetidtoken)
- [Using Firebase Auth](https://firebase.google.com/docs/auth)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# Social Login Providers: Custom Login UI
Developers can choose to **not** use the plug-and-play login UI and instead build a custom login UI to onboard users.
In this case, developers must build custom login UI themselves after configuring the social login providers in the Arcana Developer Dashboard. This custom login UI must call appropriate user onboarding functions offered by the Arcana Auth SDK for every configured social login provider.
[Apple](apple-oauth/)
[Discord](discord-oauth/)
[GitHub](github-oauth/)
[Google](google-oauth/)
[Steam](steam-oauth/)
[Telegram](telegram-oauth/)
[Twitch](twitch-oauth/)
[Twitter](twitter-oauth/)
# User Login with Apple
In this guide, you will learn how a 'Vanilla HTML/CSS/JS' app integrated with the Arcana Auth SDK can onboard users via custom login UI and Apple as the authentication provider.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- [Follow the instructions to configure Apple](../../../../../../setup/config-social/apple-oauth/) as the authentication provider.
- Use the appropriate integration method as per the app type and [integrate the app](../../../../../integrate/vanilla-html-css-js/) with the Arcana Auth SDK before accessing the user onboarding function of the Arcana Auth SDK.
## Steps
*Using Apple to onboard users in a Web3 app that is integrated with the Arcana Auth SDK requires a single line of code.*
## Step 1: Call `loginWithSocial` function
Make sure that all the prerequisites listed above are met. The app should be successfully registered, configured, and integrated with the Arcana Auth SDK, before adding code to onboard users via Apple.
```
await auth.loginWithSocial('apple')
```
Check if a user is logged in:
```
const connected = await auth.isLoggedIn()
```
Add code in the app to log out an authenticated user:
```
await auth.logout()
```
**That is all**
The Web3 app is all set for onboarding users via Apple.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/)
- [Handling authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# User Login with Discord
In this guide, you will learn how a Vanilla HTML/CSS/JS app integrated with the Arcana Auth SDK can onboard users via custom login UI and Discord as the authentication provider.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- Carefully [follow the instructions to configure Discord](../../../../../../setup/config-social/discord-oauth/) as the authentication provider.
- Use the appropriate integration method as per the app type and [integrate the app](../../../../../integrate/vanilla-html-css-js/) with the Arcana Auth SDK before accessing the user onboarding function of the Arcana Auth SDK.
## Steps
*Using Discord to onboard users in a Web3 app that is integrated with the Arcana Auth SDK requires a single line of code.*
## Step 1: Call `loginWithSocial` function
Make sure that all the prerequisites listed above are met. The app should be successfully registered, configured, and integrated with the Arcana Auth SDK, before adding code to onboard users via Discord.
```
await auth.loginWithSocial('discord')
```
Check if a user is logged in:
```
const connected = await auth.isLoggedIn()
```
Add code in the app to log out an authenticated user:
```
await auth.logout()
```
**That is all.**
The Web3 app is all set for onboarding users via Discord.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/)
- [Handling authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# User Login with GitHub
In this guide, you will learn how a Vanilla HTML/CSS/JS app integrated with the Arcana Auth SDK can onboard users via custom login UI and GitHub as the authentication provider.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- Carefully [follow the instructions to configure GitHub](../../../../../../setup/config-social/github-oauth/) as the authentication provider.
- Use the appropriate integration method as per the app type and [integrate the app](../../../../../integrate/vanilla-html-css-js/) with the Arcana Auth SDK before accessing the user onboarding function of the Arcana Auth SDK.
## Steps
*Using GitHub to onboard users in a Web3 app that is integrated with the Arcana Auth SDK requires a single line of code.*
## Step 1: Call `loginWithSocial` function
Make sure that all the prerequisites listed above are met. The app should be successfully registered, configured, and integrated with the Arcana Auth SDK, before adding code to onboard users via GitHub.
```
await auth.loginWithSocial('github')
```
Check if a user is logged in:
```
const connected = await auth.isLoggedIn()
```
Add code in the app to log out an authenticated user:
```
await auth.logout()
```
**That is all.**
The Web3 app is all set for onboarding users via GitHub.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/)
- [Handling authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# User Login with Google
In this guide, you will learn how a 'Vanilla HTML/CSS/JS' app integrated with the Arcana Auth SDK can onboard users via custom login UI and Google as the authentication provider.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- Carefully [follow the instructions to configure Google](../../../../../../setup/config-social/google-oauth/) as the authentication provider.
- Use the appropriate integration method as per the app type and [integrate the app](../../../../../integrate/vanilla-html-css-js/) with the Arcana Auth SDK before accessing the user onboarding function of the Arcana Auth SDK.
## Steps
*Using Google to onboard users in a Web3 app that is integrated with the Arcana Auth SDK requires a single line of code.*
## Step 1: Call `loginWithSocial` function
Make sure that all the prerequisites listed above are met. The app should be successfully registered, configured, and integrated with the Arcana Auth SDK, before adding code to onboard users via Google.
```
await auth.loginWithSocial('google')
```
Check if a user is logged in:
```
const connected = await auth.isLoggedIn()
```
Add code in the app to log out an authenticated user:
```
await auth.logout()
```
**That is all.**
The Web3 app is all set for onboarding users via Google.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/)
- [Handling authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# User Login with Steam OAuth
In this guide, you will learn how a 'Vanilla HTML/CSS/JS' app integrated with the Arcana Auth SDK can onboard users via custom login UI and Steam as the authentication provider.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- Carefully [follow the instructions to obtain Steam API key and set it up in the dashboard](../../../../../../setup/config-social/steam-oauth/) for user authentication.
- Use the appropriate integration method as per the app type and [integrate the app](../../../../../integrate/vanilla-html-css-js/) with the Arcana Auth SDK before accessing the user onboarding function of the Arcana Auth SDK.
## Steps
*Using Steam to onboard users in a Web3 app that is integrated with the Arcana Auth SDK requires a single line of code.*
## Step 1: Call `loginWithSocial` function
Make sure that all the prerequisites listed above are met. The app should be successfully registered, configured, and integrated with the Arcana Auth SDK, before adding code to onboard users via Steam OAuth.
```
await auth.loginWithSocial('steam')
```
Check if a user is logged in:
```
const connected = await auth.isLoggedIn()
```
After onboarding users, developers can add code to access the other Arcana Auth SDK functions in the app. See [Arcana Auth SDK Usage Guide](../../../../../auth-usage-guide/) for details.
Add code in the application to log out an authenticated user:
```
await auth.logout()
```
**That is all.**
Your app is all set for authenticating users via Steam OAuth. Authenticated users can instantly access the Arcana wallet to sign blockchain transactions.
No Aggregate Login with Steam OAuth
The [aggregate login feature](../../../../../../concepts/aggregatelogin/) does not work for the Steam OAuth login mechanism.
When a user has the same email registered with a social login provider and Steam OAuth, logging in with Steam makes a new unique account. Even if the user later logs in with the same email through a social login provider or passwordless, it creates a different wallet address for the same user.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/)
- [Handing authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# User Login with Telegram
In this guide, you will learn how a 'Vanilla HTML/CSS/JS' app integrated with the Arcana Auth SDK can onboard users via custom login UI and Telegram as the social authentication provider.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- [Follow the instructions to configure Telegram](../../../../../../setup/config-social/telegram-oauth/) as the authentication provider.
- Use the appropriate integration method as per the app type and [integrate the app](../../../../../integrate/vanilla-html-css-js/) with the Arcana Auth SDK before accessing the user onboarding function of the Arcana Auth SDK.
## Steps
*Using Telegram to onboard users in a Web3 app that is integrated with the Arcana Auth SDK requires a single line of code.*
## Step 1: Call `loginWithBearer` function
Make sure that all the prerequisites listed above are met. The app should be successfully registered, configured, and integrated with the Arcana Auth SDK, before adding code to onboard users via Telegram.
```
window.onload = () => {
const btn = document.getElementById("telegram-login");
btn.onclick = () => {
const url = new URL("/auth", "https://oauth.telegram.org");
url.searchParams.append("bot_id", "7097916610");
url.searchParams.append("scope", "profile");
url.searchParams.append("origin", "https://zcnk5z-5000.csb.app");
url.searchParams.append("return_to", "https://zcnk5z-5000.csb.app/redirect");
setTimeout(() => (window.location.href = url.toString()), 50);
};
};
```
```
const { AuthProvider } = window.arcana.auth;
window.onload = async () => {
const auth = new AuthProvider( //Use ClientID to create AuthProvider
"xar_dev_92ecc87db08e4c13b1fcd9b37ca9bf54fa874355"
);
await auth.init(); //Initialize the Auth Provider
const u = new URL(window.location.href);
if (u.hash) {
const p = new URLSearchParams(u.hash.substring(1));
const t = p.get("tgAuthResult");
if (t) {
cleanURL();
//Initiate social login, must set app domain in Telegram bot for successful login
await auth.loginWithBearer("telegram", { token: t });
}
}
};
function cleanURL() {
const cleanUrl = window.location.origin + window.location.pathname;
window.history.replaceState(null, "", cleanUrl);
}
```
Check if a user is logged in:
```
const connected = await auth.isLoggedIn()
```
Add code in the app to log out an authenticated user:
```
await auth.logout()
```
**That is all.**
The Web3 app is all set for onboarding users via Telegram.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/)
- [Handling authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# User Login with Twitch
In this guide, you will learn how a 'Vanilla HTML/CSS/JS' app integrated with the Arcana Auth SDK can onboard users via custom login UI and Twitch as the authentication provider.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- Carefully [follow the instructions to configure Twitch](../../../../../../setup/config-social/twitch-oauth/) as the authentication provider.
- Use the appropriate integration method as per the app type and [integrate the app](../../../../../integrate/vanilla-html-css-js/) with the Arcana Auth SDK before accessing the user onboarding function of the Arcana Auth SDK.
## Steps
*Using Twitch to onboard users in a Web3 app that is integrated with the Arcana Auth SDK requires a single line of code.*
## Step 1: Call `loginWithSocial` function
Make sure that all the prerequisites listed above are met. The app should be successfully registered, configured, and integrated with the Arcana Auth SDK, before adding code to onboard users via Twitch.
```
await auth.loginWithSocial('twitch')
```
Check if a user is logged in:
```
const connected = await auth.isLoggedIn()
```
Add code in the app to log out an authenticated user:
```
await auth.logout()
```
**That is all.**
The Web3 app is all set for onboarding users via Twitch.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/)
- [Handling authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# User Login with Twitter
In this guide, you will learn how a 'Vanilla HTML/CSS/JS' app integrated with the Arcana Auth SDK can onboard users via custom login UI and Twitter as the authentication provider.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- Carefully [follow the instructions to configure Twitter](../../../../../../setup/config-social/twitter-oauth/) as the authentication provider.
- Use the appropriate integration method as per the app type and [integrate the app](../../../../../integrate/vanilla-html-css-js/) with the Arcana Auth SDK before accessing the user onboarding function of the Arcana Auth SDK.
## Steps
*Using Twitter to onboard users in a Web3 app that is integrated with the Arcana Auth SDK requires a single line of code.*
## Step 1: Call `loginWithSocial` function
Make sure that all the prerequisites listed above are met. The app should be successfully registered, configured, and integrated with the Arcana Auth SDK, before adding code to onboard users via Twitter.
```
await auth.loginWithSocial('twitter')
```
Check if a user is logged in:
```
const connected = await auth.isLoggedIn()
```
Add code in the application to log out an authenticated user:
```
await auth.logout()
```
**That is all.**
The Web3 app is all set for onboarding users via Twitter.
No Aggregate Login with Twitter OAuth
The [aggregate login feature](../../../../../../concepts/aggregatelogin/) does not work for the Steam OAuth login mechanism.
When a user has the same email registered with a social login provider and Steam OAuth, logging in with Steam makes a new unique account. Even if the user later logs in with the same email through a social login provider or passwordless, it creates a different wallet address for the same user.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/)
- [Handling authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# Plug-and-Play Login UI
Use the built-in, [plug-and-play login UI modal](../../../../concepts/plug-and-play-auth/) to quickly onboard users in a 'Vue' app integrated with the Arcana Auth Wagmi SDK.
Custom Login UI
You can onboard users through a [custom login UI](../../../../concepts/custom-login-ui/) instead of the [built-in plug-and-play](../../../../concepts/plug-and-play-auth/) one. See [how to use custom login UI](../custom-ui/) and onboard users in a 'Vue' app.
## Prerequisites
- [Register](../../../../setup/config-auth/register-app/) the app that uses `wagmi` and configure the SDK usage [settings for social login](../../../../setup/) providers, [manage app chains](../../../../setup/config-wallet-chains/) and [wallet user experience](../../../../setup/config-wallet/).
- Install the [required SDK packages](../../../sdk-installation/) for 'Vue'.
- [Integrate](../../../integrate/wagmi/) 'Vue' app, create and initialize the `AuthProvider`.
## Steps
### 1. `connect`
Use the `connect()` function to bring up the plug-and-play pop-up modal in the app context and display the available options for user onboarding. Only those options are displayed that were earlier configured by the developer using the Arcana Developer Dashboard. The passwordless login option is enabled by default.
```
await auth.connect();
```
Plug-and-Play Login UI
Compact Mode
While creating the `AuthProvider`, use `connectoOptions` to optionally choose the [compact mode](../../../../concepts/plug-and-play-auth/#compact-modal) for the plug-and-play login UI.
```
connectOptions: {
compact: true // default - false
},
```
Login UI Options
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use..
No plug-and-play support for Firebase authentication.
The [plug and play feature](../../../../concepts/plug-and-play-auth/) of the Arcana Auth SDK does not support social login via Firebase. Developers must build a custom login UI and add code to onboard users. For details, see [onboarding users via Firebase and custom login UI](../../vanilla/custom-ui/build-idm/firebase-login/)
No plug-and-play support for Telegram authentication.
The [plug and play feature](../../../../concepts/plug-and-play-auth/) of the Arcana Auth SDK does not support social login via Telegram. Developers must build a custom login UI and add code to onboard users. For details, see \[\[{{ no such element: dict object['telegram_custom_ui_tag'] }}|onboarding users via Telegram and custom login UI\]\].
## What's Next?
Use `AuthProvider`, the EIP-1193 provider offered by the SDK, to call supported JSON/RPC functions and [Web3 wallet operations](../../../web3-ops/evm/) in the authenticated user's context.
## See also
**'Vue'** integration example: See `sample-auth-vue` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
- [FAQ](../../../../faq/faq-gen/)
- [Troubleshooting Guide](../../../../troubleshooting/)
- [Arcana Auth SDK Errors](../../../auth-error-msg/)
Arcana Auth SDK Quick Links
- [Arcana Auth SDK Reference](https://authsdk-ref-guide.netlify.app/)
- [Release notes](../../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth)
[Try Demo App](https://demo.arcana.network)
# Custom Login UI
[Passwordless Auth](build-pwdless-auth/)
[Social Login Provider](build-social/)
[IAM Provider](build-idm/)
# Build Custom Passwordless Auth
In this guide, you will learn how to integrate Vue app with the Arcana Auth SDK and then onboard users through custom login UI and passwordless login option.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- The app must be [registered using the Arcana Developer Dashboard](../../../../../setup/config-auth/register-app/). A unique Client ID is assigned after app registration. It is required for integrating the app with the Arcana Auth SDK
- Follow the instructions as per the app type and [integrate the app](../../../../integrate/vanilla-html-css-js/) with the Arcana Auth SDK.
Configuring App
Unlike other user onboarding options that require enabling authentication providers, passwordless login can be enabled without any configuration setup using the Arcana Developer Dashboard.
Developers can optionally choose to modify the default settings for branding and the Arcana wallet settings in the Arcana Developer Dashboard.
## Steps
*Follow these steps for enabling passwordless login in a Web3 app that is integrated with the Arcana Auth SDK.*
After integrating the app, add the code to onboard users in a passwordless manner using the SDK method listed below.
App users must supply an email ID to receive the OTP for logging into the app. An OTP is sent to the specified email ID. When the user provides the same OTP in the app context, authentication is complete and a wallet address is assigned to the user.
### Login with link
```
await auth.loginWithLink(`${email}`)
```
Deprecated
`loginWithLink` is deprecated.
Use `loginWithOTPStart`, `loginWithOTPComplete` for passwordless login with OTP. The OTP will be received via email supplied in `loginWithOTPStart` call.
### Login with OTP
```
try {
const loginState = await auth.loginWithOTPStart("john.doe@somemail.com");
await loginState.begin()
if(loginState.isCompleteRequired) {
// App is using default app-specific keys
// App must ask the user to input a 6-digit code received in mail
var userInput = prompt("Please enter a 6-digit code:", "111111");
// Validate if the input is a 6-digit code
if (userInput !== null &&
userInput.length === 6 &&
!isNaN(userInput)) {
const complete = await auth.loginWithOTPComplete(
userInput,
onMFARequired() => {
//Hide overlay, if used in the app
});
console.log("complete:",complete);
} else {
console.log("Invalid input. Please enter a valid 6-digit code.");
}
} else {
// App is using global keys, built-in OTP input UI is displayed by the SDK
// App is not required to add code for OTP input
}
} catch (e) {
console.log(e);
}
```
Global vs. App Specific Keys
Apps using app-specific keys must use a custom login UI that allows users to input the OTP. In this case, the `isCompleteRequired` boolean returns `true` after initiating login with OTP.
Apps using global keys are not required to use a custom login UI. A built-in login UI is automatically displayed for the user for OTP. Users must enter the OTP received via email in this UI.
MFA Enabled / Disabled
During passwordless login via OTP, apps configured for MFA and those using overlays must hide it to enable OTP input. Use the `isMFARequired` callback in the `loginWithOTPComplete` method to hide the overlay.
Check if the user has logged in successfully:
```
const connected = await auth.isLoggedIn()
```
Log out the dApp user when requested:
```
await auth.logout()
```
**That is all.**
Your dApp is all set for onboarding users via the passwordless login option.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../concepts/authtype/)
- [Configure Social Providers](../../../../../setup/)
- [Arcana Auth SDK Errors](../../../../auth-error-msg/)
- [Arcana Auth SDK Usage Guide](../../../../auth-usage-guide/)
- [Arcana Auth SDK Reference](https://authsdk-ref-guide.netlify.app/)
# IAM Providers: Custom Login UI
Developers can choose to **not** use Arcana's plug-and-play login UI for third-party IAM providers and instead build a custom login UI to onboard users.
In this case, developers must build the custom login UI themselves after configuring the IAM providers in the Arcana Developer Dashboard. This custom login UI must call appropriate user onboarding functions offered by the Arcana Auth SDK for the third-party IAM providers.
[Cognito](cognito-oauth/)
[Firebase](firebase-login/)
# User Login with AWS Cognito
In this guide, you will learn how a Vue app integrated with the Arcana Auth SDK can onboard users via custom login UI and AWS Cognito as the authentication provider.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- Carefully [follow the instructions to configure AWS Cognito](../../../../../../setup/config-idm/cognito-oauth/) as the authentication provider.
- Use the appropriate integration method as per the app type and [integrate the app](../../../../../integrate/vanilla-html-css-js/) with the Arcana Auth SDK before accessing the user onboarding function of the Arcana Auth SDK.
## Steps
*Using AWS Cognito to onboard users in a Web3 app that is integrated with the Arcana Auth SDK requires a single line of code.*
### Call `loginWithSocial` function
Make sure that all the prerequisites listed above are met. The app should be successfully registered, configured, and integrated with the Arcana Auth SDK, before adding code to onboard users via AWS Cognito.
```
await auth.loginWithSocial('aws')
```
Check if a user is logged in:
```
const connected = await auth.isLoggedIn()
```
After onboarding users, developers can add code to access the other Arcana Auth SDK functions in the app. See [Arcana Auth SDK Usage Guide](../../../../../auth-usage-guide/) for details.
Add code in the application to log out an authenticated user:
```
await auth.logout()
```
**That is all.**
Your app is all set for authenticating users via AWS Cognito. Authenticated users can instantly access the Arcana wallet to sign blockchain transactions.
Apps using IAM Providers
Apps usually use Arcana Auth SDK for user onboarding and blockchain transaction signing. Authentication providers must be set up in the Arcana Developer Dashboard before integrating with the SDK.
Some apps might use third-party IAM providers like AWS Cognito for authentication but still use Arcana Auth SDK to access Arcana wallet. The setup is different since third-party IAM providers support authentication verifiers like Google directly.
Developers only need to set up the IAM provider in the Arcana Developer Dashboard. They don't need to configure authentication verifiers that work directly with the IAM providers. Use the IAM provider's console, like Cognito Developer Console, to set up authentication verifiers like Google, not the Arcana Developer Dashboard.
No Aggregate Login with Cognito
The [aggregate login feature](../../../../../../concepts/aggregatelogin/) does not work for the third-party IAM providers such as Cognito.
If a user has the same email ID registered with say a social login provider and with Cognito, logging into an app using Cognito will create a new unique user account even if the user uses the same email as the one used with a social login provider or via the passwordless option. What this means is that the wallet address for the same user will be different when Cognito is used to log in and subsequently a social login provider or passwordless login is used by the same user having the same email ID.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/)
- [Handing authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# User Login with Firebase
In this guide, you will learn how a Vue app integrated with the Arcana Auth SDK and Firebase SDK can onboard users via custom login UI and Firebase as the authentication provider.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- Carefully [follow the instructions to configure Firebase](../../../../../../setup/config-idm/firebase-auth/) as the authentication provider.
- Install the Firebase SDK and integrate the app as explained in the Firebase documentation for [iOS apps](https://firebase.google.com/docs/ios/setup), [Android apps](https://firebase.google.com/docs/android/setup) and [web apps](https://firebase.google.com/docs/web/setup). Use [Firebase authentication](https://firebase.google.com/docs/auth) as per the Web3 app type, mobile or web app. Once a user is authenticated by Firebase, the developer must obtain the token and user identifier and provide it as input to the `loginWithBearer` function of the Arcana Auth SDK for onboarding users to Web3.
- Install the Arcana Auth SDK and [integrate the app](../../../../../integrate/vanilla-html-css-js/) with the Arcana Auth SDK by using the appropriate integration method as per the app type. After that follow the steps listed below and add code to onboard users to Web3 and enable them to sign blockchain transactions.
## Steps
*Using Firebase to onboard users in a Web3 app that is integrated with the Arcana Auth SDK requires a single line of code.*
### Call `loginWithBearer` function
Make sure that all the prerequisites listed above are met. The app should be successfully registered, configured, and integrated with both the Firebase SDK as well as the Arcana Auth SDK, before adding code to onboard users via Firebase.
App.vue
```
import { initializeApp } from 'firebase/app'
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from 'firebase/auth'
import { AuthProvider, BearerAuthentication } from '@arcana/auth'
const config = {
apiKey: "AIzaSyBddysLWM9CcpNEVLbUz52YwyQL_uytQX0", // Obtain this after registering app at Firebase console
authDomain: "arc4n4-docx.firebaseapp.com", // Project ID Domain setting in the Firebase console
projectId: "some-projectid-example-arc4n4-docx",
storageBucket: "some-storage-arc4n4-docx.appspot.com",
messagingSenderId: "2xxxx318486297382",
appId: "4:3184ddddddd7382:web:8b639axxxxxxxx39f85fe7",
measurementId: "G-EGccccccLDR"
};
const firebaseApp = initializeApp(config)
const firebaseAuth = getAuth(firebaseApp)
//Create Arcana Auth Provider
// Get client ID 'xar_live_xxxxxx' from Arcana Developer Dashboard
const auth = new AuthProvider("xar_live_123940ytyoxxxxxxx343o404",{
network: "mainnet", //change it to testnet or mainnet
})
export default {
name: 'App',
data: () => ({
email: '',
password: ''
}),
mounted () {
AP.init().then((k) => console.log(k)).catch(e => console.error(e)) //Initialize the Auth Provider
},
methods: {
async ultimate (upm) {
if (await AP.isLoggedIn()) {
window.alert('Already logged in')
return
}
await auth.loginWithBearer(BearerAuthentication.firebase, {
uid: upm.user.uid,
token: upm.user.accessToken
})
},
async login () { //Sign in existing Firebase users
const data = await signInWithEmailAndPassword(firebaseAuth, this.email, this.password)
console.log('Data:', data)
return this.ultimate(data)
},
async register () { //Sign up new users with Firebase Auth
const data = await createUserWithEmailAndPassword(firebaseAuth, this.email, this.password)
console.log('Data:', data)
return this.ultimate(data)
}
}
}
...
```
Refer to the [Sample Firebase Vue app integration example](https://github.com/arcana-network/auth-examples) to see how the `loginWithBearer` function is used.
After onboarding users, developers can add code to access the other Arcana Auth SDK functions in the app. See [Arcana Auth SDK Usage Guide](../../../../../auth-usage-guide/) for details.
**That is all.**
Your app is all set for authenticating users via Firebase. Authenticated users can instantly access the Arcana wallet to sign blockchain transactions.
No Aggregate Login with Firebase
The [aggregate login feature](../../../../../../concepts/aggregatelogin/) does not work for third-party IAM providers such as Firebase.
If a user has the same email ID registered with say a social login provider and with Firebase, logging into an app using Firebase will create a new unique user account even if the user uses the same email as the one used with a social login provider or via the passwordless option. What this means is that the wallet address for the same user will be different when Firebase is used to log in and subsequently a social login provider or passwordless login is used by the same user having the same email ID.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/)
- [Handing authentication errors](../../../../../auth-error-msg/)
- [Get Firebase User token](https://firebase.google.com/docs/reference/js/auth.user.md#usergetidtoken)
- [Using Firebase Auth](https://firebase.google.com/docs/auth)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# Social Login Providers: Custom Login UI
Developers can choose to **not** use the plug-and-play login UI and instead build a custom login UI to onboard users.
In this case, developers must build custom login UI themselves after configuring the social login providers in the Arcana Developer Dashboard. This custom login UI must call appropriate user onboarding functions offered by the Arcana Auth SDK for every configured social login provider.
[Apple](apple-oauth/)
[Discord](discord-oauth/)
[GitHub](github-oauth/)
[Google](google-oauth/)
[Steam](steam-oauth/)
[Telegram](telegram-oauth/)
[Twitch](twitch-oauth/)
[Twitter](twitter-oauth/)
# User Login with Apple
In this guide, you will learn how a Vue app integrated with the Arcana Auth SDK can onboard users via custom login UI and Apple as the authentication provider.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- [Follow the instructions to configure Apple](../../../../../../setup/config-social/apple-oauth/) as the authentication provider.
- Use the appropriate integration method as per the app type and [integrate the app](../../../../../integrate/vanilla-html-css-js/) with the Arcana Auth SDK before accessing the user onboarding function of the Arcana Auth SDK.
## Steps
*Using Apple to onboard users in a Web3 app that is integrated with the Arcana Auth SDK requires a single line of code.*
## Step 1: Call `loginWithSocial` function
Make sure that all the prerequisites listed above are met. The app should be successfully registered, configured, and integrated with the Arcana Auth SDK, before adding code to onboard users via Apple.
```
await auth.loginWithSocial('apple')
```
Check if a user is logged in:
```
const connected = await auth.isLoggedIn()
```
Add code in the app to log out an authenticated user:
```
await auth.logout()
```
**That is all**
The Web3 app is all set for onboarding users via Apple.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/)
- [Handling authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# User Login with Discord
In this guide, you will learn how a Vue app integrated with the Arcana Auth SDK can onboard users via custom login UI and Discord as the authentication provider.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- Carefully [follow the instructions to configure Discord](../../../../../../setup/config-social/discord-oauth/) as the authentication provider.
- Use the appropriate integration method as per the app type and [integrate the app](../../../../../integrate/vanilla-html-css-js/) with the Arcana Auth SDK before accessing the user onboarding function of the Arcana Auth SDK.
## Steps
*Using Discord to onboard users in a Web3 app that is integrated with the Arcana Auth SDK requires a single line of code.*
## Step 1: Call `loginWithSocial` function
Make sure that all the prerequisites listed above are met. The app should be successfully registered, configured, and integrated with the Arcana Auth SDK, before adding code to onboard users via Discord.
```
await auth.loginWithSocial('discord')
```
Check if a user is logged in:
```
const connected = await auth.isLoggedIn()
```
Add code in the app to log out an authenticated user:
```
await auth.logout()
```
**That is all.**
The Web3 app is all set for onboarding users via Discord.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/)
- [Handling authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# User Login with GitHub
In this guide, you will learn how a Vue app integrated with the Arcana Auth SDK can onboard users via custom login UI and GitHub as the authentication provider.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- Carefully [follow the instructions to configure GitHub](../../../../../../setup/config-social/github-oauth/) as the authentication provider.
- Use the appropriate integration method as per the app type and [integrate the app](../../../../../integrate/vanilla-html-css-js/) with the Arcana Auth SDK before accessing the user onboarding function of the Arcana Auth SDK.
## Steps
*Using GitHub to onboard users in a Web3 app that is integrated with the Arcana Auth SDK requires a single line of code.*
## Step 1: Call `loginWithSocial` function
Make sure that all the prerequisites listed above are met. The app should be successfully registered, configured, and integrated with the Arcana Auth SDK, before adding code to onboard users via GitHub.
```
await auth.loginWithSocial('github')
```
Check if a user is logged in:
```
const connected = await auth.isLoggedIn()
```
Add code in the app to log out an authenticated user:
```
await auth.logout()
```
**That is all.**
The Web3 app is all set for onboarding users via GitHub.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/)
- [Handling authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# User Login with Google
In this guide, you will learn how a Vue app integrated with the Arcana Auth SDK can onboard users via custom login UI and Google as the authentication provider.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- Carefully [follow the instructions to configure Google](../../../../../../setup/config-social/google-oauth/) as the authentication provider.
- Use the appropriate integration method as per the app type and [integrate the app](../../../../../integrate/vanilla-html-css-js/) with the Arcana Auth SDK before accessing the user onboarding function of the Arcana Auth SDK.
## Steps
*Using Google to onboard users in a Web3 app that is integrated with the Arcana Auth SDK requires a single line of code.*
## Step 1: Call `loginWithSocial` function
Make sure that all the prerequisites listed above are met. The app should be successfully registered, configured, and integrated with the Arcana Auth SDK, before adding code to onboard users via Google.
```
await auth.loginWithSocial('google')
```
Check if a user is logged in:
```
const connected = await auth.isLoggedIn()
```
Add code in the app to log out an authenticated user:
```
await auth.logout()
```
**That is all.**
The Web3 app is all set for onboarding users via Google.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/)
- [Handling authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# User Login with Steam OAuth
In this guide, you will learn how a Vue app integrated with the Arcana Auth SDK can onboard users via custom login UI and Steam as the authentication provider.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- Carefully [follow the instructions to obtain Steam API key and set it up in the dashboard](../../../../../../setup/config-social/steam-oauth/) for user authentication.
- Use the appropriate integration method as per the app type and [integrate the app](../../../../../integrate/vanilla-html-css-js/) with the Arcana Auth SDK before accessing the user onboarding function of the Arcana Auth SDK.
## Steps
*Using Steam to onboard users in a Web3 app that is integrated with the Arcana Auth SDK requires a single line of code.*
## Step 1: Call `loginWithSocial` function
Make sure that all the prerequisites listed above are met. The app should be successfully registered, configured, and integrated with the Arcana Auth SDK, before adding code to onboard users via Steam OAuth.
```
await auth.loginWithSocial('steam')
```
Check if a user is logged in:
```
const connected = await auth.isLoggedIn()
```
After onboarding users, developers can add code to access the other Arcana Auth SDK functions in the app. See [Arcana Auth SDK Usage Guide](../../../../../auth-usage-guide/) for details.
Add code in the application to log out an authenticated user:
```
await auth.logout()
```
**That is all.**
Your app is all set for authenticating users via Steam OAuth. Authenticated users can instantly access the Arcana wallet to sign blockchain transactions.
No Aggregate Login with Steam OAuth
The [aggregate login feature](../../../../../../concepts/aggregatelogin/) does not work for the Steam OAuth login mechanism.
When a user has the same email registered with a social login provider and Steam OAuth, logging in with Steam makes a new unique account. Even if the user later logs in with the same email through a social login provider or passwordless, it creates a different wallet address for the same user.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/)
- [Handing authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# User Login with Telegram
In this guide, you will learn how a Vue app integrated with the Arcana Auth SDK can onboard users via custom login UI and Telegram as the social authentication provider.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- [Follow the instructions to configure Telegram](../../../../../../setup/config-social/telegram-oauth/) as the authentication provider.
- Use the appropriate integration method as per the app type and [integrate the app](../../../../../integrate/vanilla-html-css-js/) with the Arcana Auth SDK before accessing the user onboarding function of the Arcana Auth SDK.
## Steps
*Using Telegram to onboard users in a Web3 app that is integrated with the Arcana Auth SDK requires a single line of code.*
## Step 1: Call `loginWithBearer` function
Make sure that all the prerequisites listed above are met. The app should be successfully registered, configured, and integrated with the Arcana Auth SDK, before adding code to onboard users via Telegram.
```
window.onload = () => {
const btn = document.getElementById("telegram-login");
btn.onclick = () => {
const url = new URL("/auth", "https://oauth.telegram.org");
url.searchParams.append("bot_id", "7097916610");
url.searchParams.append("scope", "profile");
url.searchParams.append("origin", "https://zcnk5z-5000.csb.app");
url.searchParams.append("return_to", "https://zcnk5z-5000.csb.app/redirect");
setTimeout(() => (window.location.href = url.toString()), 50);
};
};
```
```
const { AuthProvider } = window.arcana.auth;
window.onload = async () => {
const auth = new AuthProvider( //Use ClientID to create AuthProvider
"xar_dev_92ecc87db08e4c13b1fcd9b37ca9bf54fa874355"
);
await auth.init(); //Initialize the Auth Provider
const u = new URL(window.location.href);
if (u.hash) {
const p = new URLSearchParams(u.hash.substring(1));
const t = p.get("tgAuthResult");
if (t) {
cleanURL();
//Initiate social login, must set app domain in Telegram bot for successful login
await auth.loginWithBearer("telegram", { token: t });
}
}
};
function cleanURL() {
const cleanUrl = window.location.origin + window.location.pathname;
window.history.replaceState(null, "", cleanUrl);
}
```
Check if a user is logged in:
```
const connected = await auth.isLoggedIn()
```
Add code in the app to log out an authenticated user:
```
await auth.logout()
```
**That is all.**
The Web3 app is all set for onboarding users via Telegram.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/)
- [Handling authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# User Login with Twitch
In this guide, you will learn how a Vue app integrated with the Arcana Auth SDK can onboard users via custom login UI and Twitch as the authentication provider.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- Carefully [follow the instructions to configure Twitch](../../../../../../setup/config-social/twitch-oauth/) as the authentication provider.
- Use the appropriate integration method as per the app type and [integrate the app](../../../../../integrate/vanilla-html-css-js/) with the Arcana Auth SDK before accessing the user onboarding function of the Arcana Auth SDK.
## Steps
*Using Twitch to onboard users in a Web3 app that is integrated with the Arcana Auth SDK requires a single line of code.*
## Step 1: Call `loginWithSocial` function
Make sure that all the prerequisites listed above are met. The app should be successfully registered, configured, and integrated with the Arcana Auth SDK, before adding code to onboard users via Twitch.
```
await auth.loginWithSocial('twitch')
```
Check if a user is logged in:
```
const connected = await auth.isLoggedIn()
```
Add code in the app to log out an authenticated user:
```
await auth.logout()
```
**That is all.**
The Web3 app is all set for onboarding users via Twitch.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/)
- [Handling authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# User Login with Twitter
In this guide, you will learn how a Vue app integrated with the Arcana Auth SDK can onboard users via custom login UI and Twitter as the authentication provider.
## Prerequisites
- Make sure you can access the Arcana Developer Dashboard:
- Use the [Arcana Developer Dashboard](../../../../../../concepts/dashboard/) to [register the app](../../../../../../setup/config-auth/register-app/) and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
- Carefully [follow the instructions to configure Twitter](../../../../../../setup/config-social/twitter-oauth/) as the authentication provider.
- Use the appropriate integration method as per the app type and [integrate the app](../../../../../integrate/vanilla-html-css-js/) with the Arcana Auth SDK before accessing the user onboarding function of the Arcana Auth SDK.
## Steps
*Using Twitter to onboard users in a Web3 app that is integrated with the Arcana Auth SDK requires a single line of code.*
## Step 1: Call `loginWithSocial` function
Make sure that all the prerequisites listed above are met. The app should be successfully registered, configured, and integrated with the Arcana Auth SDK, before adding code to onboard users via Twitter.
```
await auth.loginWithSocial('twitter')
```
Check if a user is logged in:
```
const connected = await auth.isLoggedIn()
```
Add code in the application to log out an authenticated user:
```
await auth.logout()
```
**That is all.**
The Web3 app is all set for onboarding users via Twitter.
No Aggregate Login with Twitter OAuth
The [aggregate login feature](../../../../../../concepts/aggregatelogin/) does not work for the Steam OAuth login mechanism.
When a user has the same email registered with a social login provider and Steam OAuth, logging in with Steam makes a new unique account. Even if the user later logs in with the same email through a social login provider or passwordless, it creates a different wallet address for the same user.
Arcana JWT Token
Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the [Arcana JWT Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `loginToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/jwt-token-validation/) and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use `userDIDToken` to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the [Arcana DID Token](../../../../../../concepts/an-jwt-token/). App developers can access this token via `getUser()` method and refer to the `userDIDToken` field of the [`UserInfo`](https://authsdk-ref-guide.netlify.app/interfaces/userinfo) object.
Developers can use this token to [verify the user](../../../../../../concepts/an-did-token/#verify-did-token) and subsequently generate another token for app use.
## What's Next?
Authenticated users can instantly access the in-app Arcana wallet UI for signing blockchain transactions. Use the `AuthProvider` EIP-1193 standard Ethereum provider to call JSON/RPC functions and Web3 wallet operations in the app. [Learn more...](../../../../../web3-ops/evm/)
## See also
- [Authentication Types](../../../../../../concepts/authtype/)
- [Handling authentication errors](../../../../../auth-error-msg/)
- [Auth Examples](https://github.com/arcana-network/auth-examples)
# Custom Login UI
Onboard users in a 'Wagmi' app integrated with the Arcana Auth SDK through a custom login UI.
Plug-and-Play Login UI
You can onboard users in a 'Wagmi' app faster through the built-in, [plug-and-play login UI](../../../../concepts/plug-and-play-auth/) instead of choosing to build a custom login UI. [Learn more...](../wagmi-pnp-ui/)
## Prerequisites
- [Register](../../../../setup/config-auth/register-app/) the Wagmi app and configure SDK usage [settings for social login](../../../../setup/) providers, [manage app chains](../../../../setup/config-wallet-chains/) and [wallet user experience](../../../../setup/config-wallet/).
- Install the [required SDK packages](../../../sdk-installation/) for 'Wagmi'.
- [Integrate](../../../integrate/wagmi/) 'Wagmi' app and create `AuthProvider`, `ArcanaConnector`.
## Steps
### 1. Configure `ArcanaConnector`
`ArcanaConnector` is created earlier as part of SDK integration. When using a custom login UI to onboard users, configure `ArcanaConnector` differently.
Add code in the custom UI for onboarding via social login and passwordless options by using the `setLogin` function.
*Enable Authentication Provider*
```
import { AuthProvider } from "@arcana/auth";
import { ArcanaConnector } from "@arcana/auth-wagmi";
import { polygon, polygonAmoy } from "wagmi/chains";
import { configureChains, createClient, Chain } from "wagmi";
import { publicProvider } from "wagmi/providers/public";
/* Using Custom UI for user login via Google */
const auth = new AuthProvider(`${arcana_client_id}`) // Singleton
export const connector = (chains: Chain[]) => {
return new ArcanaConnector({
chains,
options: {
auth: auth,
login: {
provider: 'google', //See 'Custom Login UI' section in the documentation for other supported providers.
} // Optional, specify here during ArcanaConnector instantiation or in the setLogin function
},
});
};
// Custom UI Alternative
// Use setLogin function after creating the connector.
/*
const auth = new AuthProvider(`${arcana_client_id}`) // Singleton
export const connector = (chains: Chain[]) => {
return new ArcanaConnector({
chains,
options: {
auth: auth
},
});
};
connector.setLogin({
provider: 'google'
})
*/
...
```
*Enable Passwordless Login*
```
import { AuthProvider } from "@arcana/auth";
import { ArcanaConnector } from "@arcana/auth-wagmi";
import { polygon, polygonAmoy } from "wagmi/chains";
import { configureChains, createClient, Chain } from "wagmi";
import { publicProvider } from "wagmi/providers/public";
/* Using Custom UI for Passwordless user login */
const auth = new AuthProvider(`${arcana_client_id}`) // Singleton
export const connector = (chains: Chain[]) => {
return new ArcanaConnector({
chains,
options: {
auth: auth,
login: {
provider: 'passwordless',
email: 'abc@example.com' //optional
} // Optional, specify login details here or during ArcanaConnector instantiation or in the setLogin function
},
});
};
// Custom UI Alternative
// Use setLogin function after creating the connector.
/*
const auth = new AuthProvider(`${arcana_client_id}`) // Singleton
export const connector = (chains: Chain[]) => {
return new ArcanaConnector({
chains,
options: {
auth: auth
},
});
};
connector.setLogin({
provider: 'passwordless',
email: 'abc@example.com' //optional
})
*/
...
```
Single Provider Optimization
When using a single social login provider, specify it when creating ArcanaConnector to optimize onboarding. There's no need to use setLogin later in the custom login UI code.
For multiple social login providers, create ArcanaConnector without specifying a provider. Use the setLogin function later based on the user's choice.
### 2. Set up `WagmiConfig`
Use the `ArcanaConnector` and set up [Wagmi config](https://wagmi.sh/react/getting-started).
```
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
import { coinbaseWallet, injected, walletConnect } from 'wagmi/connectors'
import { AuthProvider } from '@arcana/auth';
import { ArcanaConnector } from "@arcana/auth-wagmi"
let auth: AuthProvider | null;
if (!auth) {
auth = new AuthProvider(
"xar_dev_c2fb7be163754e57d384e24257ea2c8d2a5dd31a"
);
}
export const connector = () => {
return new ArcanaConnector({auth,})
};
export const config = createConfig({
chains: [mainnet, sepolia],
connectors: [
injected(),
coinbaseWallet({ appName: 'Create Wagmi' }),
walletConnect({ projectId: import.meta.env.VITE_WC_PROJECT_ID }),
connector(),
],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})
declare module 'wagmi' {
interface Register {
config: typeof config
}
}
```
```
// Note:
// This sample code is for
// wagmi versions 1.x.y and auth-wagmi 2.a.b
import { configureChains, createConfig, WagmiConfig } from "wagmi";
import { publicProvider } from "wagmi/providers/public";
import { ArcanaConnector } from "@arcana/auth-wagmi";
import { polygon, polygonAmoy } from "wagmi/chains";
import { newAuthProvider } from "./utils/newArcanaAuth";
import { useAccount, useConnect, useDisconnect, useBalance } from 'wagmi'
import "../styles/globals.css";
const { chains, provider, webSocketProvider } = configureChains(
[mainnet, polygon, polygonAmoy],
[publicProvider()],
{ targetQuorum: 1 }
);
export const connector = (chains: Chain[]) => {
return new ArcanaConnector({
chains,
options: {
auth: newAuthProvider(),
login: {
provider: "google",
},
},
});
};
const { chains, publicClient } = configureChains(
[polygon, polygonAmoy],
[publicProvider()]
);
export const wagmiEntity = createConfig({
autoConnect: true,
connectors: [connector(chains)],
publicClient,
});
...
```
### 3. Initialize Wagmi App Components
```
//
// For apps using Wagmi versions v2.a.b and auth-wagmi v3.x.y
//
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { Buffer } from 'buffer'
import React from 'react'
import ReactDOM from 'react-dom/client'
import { WagmiProvider } from 'wagmi'
import App from './App.tsx'
import { config } from './wagmi.ts'
import './index.css'
globalThis.Buffer = Buffer
const queryClient = new QueryClient()
ReactDOM.createRoot(document.getElementById('root')!).render(
,
)
```
```
//
// For apps using Wagmi versions v1.a.b and auth-wagmi v2.x.y
//
function App({ Component, pageProps }: AppProps) {
return (
);
}
```
## What's Next?
Use `AuthProvider`, the EIP-1193 provider offered by the SDK, to call supported JSON/RPC functions and [Web3 wallet operations](../../../web3-ops/evm/) in the authenticated user's context.
## See also
**'Wagmi'** integration example: See `sample-auth-wagmi-2`, `sample-auth-wagmi-viem`, `sample-auth-wagmi` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
- [FAQ](../../../../faq/faq-gen/)
- [Troubleshooting Guide](../../../../troubleshooting/)
- [Arcana Auth SDK Errors](../../../auth-error-msg/)
- [Arcana Auth SDK Usage Guide](../../../auth-usage-guide/)
Arcana Auth SDK Quick Links
- [Arcana Auth SDK Reference](https://authsdk-ref-guide.netlify.app/)
- [Release notes](../../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth)
Arcana Auth Wagmi SDK Quick Links
- [Arcana Auth Wagmi SDK Reference Guide](https://wagmi-authsdk-ref-guide.netlify.app/)
- [Release notes](../../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth-wagmi/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth-wagmi)
[Try Demo App](https://demo.arcana.network)
# Plug-and-Play Login UI
Use the built-in, [plug-and-play login UI modal](../../../../concepts/plug-and-play-auth/) to quickly onboard users in a 'Wagmi' app integrated with the Arcana Auth Wagmi SDK.
Custom Login UI
You can onboard users through a [custom login UI](../../../../concepts/custom-login-ui/) instead of the [built-in plug-and-play](../../../../concepts/plug-and-play-auth/) one. See [how to use custom login UI](../wagmi-custom-ui/) and onboard users in a 'Wagmi' app.
## Prerequisites
- [Register](../../../../setup/config-auth/register-app/) the Wagmi app and configure Arcana Auth SDK SDK usage [settings for social login](../../../../setup/) providers, [manage app chains](../../../../setup/config-wallet-chains/) and [wallet user experience](../../../../setup/config-wallet/).
- Install the [required SDK packages](../../../sdk-installation/) for 'Wagmi'.
- [Integrate](../../../integrate/wagmi/) 'Wagmi' app and create `AuthProvider`, `ArcanaConnector`.
## Steps
### 1. Setup `WagmiConfig`
Use the `ArcanaConnector` created during app integration to set up [Wagmi config](https://wagmi.sh/react/getting-started).
```
//
// For apps using Wagmi versions v2.a.b and auth-wagmi v3.x.y
//
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
import { coinbaseWallet, injected, walletConnect } from 'wagmi/connectors'
import { AuthProvider } from '@arcana/auth'
import { ArcanaConnector } from "@arcana/auth-wagmi"
let auth: AuthProvider | null;
if (!auth) {
auth = new AuthProvider(
"Your-app-Client-ID"
);
}
const connector = new ArcanaConnector({ auth });
export const config = createConfig({
chains: [mainnet, sepolia],
connectors: [
injected(),
coinbaseWallet({ appName: 'Create Wagmi' }),
walletConnect({ projectId: import.meta.env.VITE_WC_PROJECT_ID }),
connector(),
],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})
declare module 'wagmi' {
interface Register {
config: typeof config
}
}
...
```
```
//
// For apps using Wagmi versions v1.x.y and auth-wagmi v2.a.b
//
import { configureChains, createConfig, WagmiConfig } from "wagmi";
import { publicProvider } from "wagmi/providers/public";
import { polygon, polygonAmoy } from "wagmi/chains";
import { useAccount, useConnect, useDisconnect, useBalance } from 'wagmi'
import "../styles/globals.css";
import { AuthProvider } from '@arcana/auth'
import { ArcanaConnector } from "@arcana/auth-wagmi"
let auth: AuthProvider | null;
if (!auth) {
auth = new AuthProvider(
"Your-app-Client-ID"
);
}
const { chains, provider, webSocketProvider } = configureChains(
[mainnet, polygon, polygonAmoy],
[publicProvider()],
{ targetQuorum: 1 }
);
export const connector = (chains: Chain[]) => {
return new ArcanaConnector({
chains,
options: {
auth: auth,
},
});
};
const { chains, publicClient } = configureChains(
[polygon, polygonAmoy],
[publicProvider()]
);
export const wagmiEntity = createConfig({
autoConnect: true,
connectors: [connector(chains)],
publicClient,
});
...
```
### 2. Initialize `WagmiProvider`
Use the Wagmi config to initialize the `WagmiProvider`.
```
//
// For apps using Wagmi versions v2.a.b and auth-wagmi v3.x.y
//
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { Buffer } from 'buffer'
import React from 'react'
import ReactDOM from 'react-dom/client'
import { WagmiProvider } from 'wagmi'
import App from './App.tsx'
import { config } from './wagmi.ts'
import './index.css'
globalThis.Buffer = Buffer
const queryClient = new QueryClient()
ReactDOM.createRoot(document.getElementById('root')!).render(
,
)
```
```
//
// For apps using Wagmi versions v1.a.b and auth-wagmi v2.x.y
//
function App({ Component, pageProps }: AppProps) {
return (
);
}
```
## What's Next?
Use `AuthProvider`, the EIP-1193 provider offered by the SDK, to call supported JSON/RPC functions and [Web3 wallet operations](../../../web3-ops/evm/) in the authenticated user's context.
## See also
**'Wagmi'** integration example: See `sample-auth-wagmi-2`, `sample-auth-wagmi-viem`, `sample-auth-wagmi` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
- [FAQ](../../../../faq/faq-gen/)
- [Troubleshooting Guide](../../../../troubleshooting/)
- [Arcana Auth SDK Errors](../../../auth-error-msg/)
Arcana Auth SDK Quick Links
- [Arcana Auth SDK Reference](https://authsdk-ref-guide.netlify.app/)
- [Release notes](../../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth)
Arcana Auth Wagmi SDK Quick Links
- [Arcana Auth Wagmi SDK Reference Guide](https://wagmi-authsdk-ref-guide.netlify.app/)
- [Release notes](../../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth-wagmi/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth-wagmi)
[Try Demo App](https://demo.arcana.network)
# Custom Login UI
Onboard users in a 'WalletConnect' app integrated with the Arcana Auth SDK through a custom login UI.
Plug-and-Play Login UI
You can onboard users in a 'WalletConnect' app faster through the built-in, [plug-and-play login UI](../../../../concepts/plug-and-play-auth/) instead of choosing to build a custom login UI. [Learn more...](../walletconnect-pnp-ui/)
## Prerequisites
- [Register](../../../../setup/config-auth/register-app/) the Wagmi app and configure SDK usage [settings for social login](../../../../setup/) providers, [manage app chains](../../../../setup/config-wallet-chains/) and [wallet user experience](../../../../setup/config-wallet/).
- Install the [required SDK packages](../../../sdk-installation/) for 'WalletConnect'.
- [Integrate](../../../integrate/wagmi/) 'WalletConnect' app and create `AuthProvider`, `ArcanaConnector`.
## Steps
### 1. Configure `ArcanaConnector`
`ArcanaConnector` is created earlier as part of SDK integration. When using a custom login UI to onboard users, configure `ArcanaConnector` differently.
Add code in the custom UI for onboarding via social login and passwordless options by using the `setLogin` function.
*Enable Authentication Provider*
```
import { AuthProvider } from "@arcana/auth";
import { ArcanaConnector } from "@arcana/auth-wagmi";
import { polygon, polygonAmoy } from "wagmi/chains";
import { configureChains, createClient, Chain } from "wagmi";
import { publicProvider } from "wagmi/providers/public";
/* Using Custom UI for user login via Google */
const auth = new AuthProvider(`${arcana_client_id}`) // Singleton
export const connector = (chains: Chain[]) => {
return new ArcanaConnector({
chains,
options: {
auth: auth,
login: {
provider: 'google', //See 'Custom Login UI' section in the documentation for other supported providers.
} // Optional, specify here during ArcanaConnector instantiation or in the setLogin function
},
});
};
// Custom UI Alternative
// Use setLogin function after creating the connector.
/*
const auth = new AuthProvider(`${arcana_client_id}`) // Singleton
export const connector = (chains: Chain[]) => {
return new ArcanaConnector({
chains,
options: {
auth: auth
},
});
};
connector.setLogin({
provider: 'google'
})
*/
...
```
*Enable Passwordless Login*
```
import { AuthProvider } from "@arcana/auth";
import { ArcanaConnector } from "@arcana/auth-wagmi";
import { polygon, polygonAmoy } from "wagmi/chains";
import { configureChains, createClient, Chain } from "wagmi";
import { publicProvider } from "wagmi/providers/public";
/* Using Custom UI for Passwordless user login */
const auth = new AuthProvider(`${arcana_client_id}`) // Singleton
export const connector = (chains: Chain[]) => {
return new ArcanaConnector({
chains,
options: {
auth: auth,
login: {
provider: 'passwordless',
email: 'abc@example.com' //optional
} // Optional, specify login details here or during ArcanaConnector instantiation or in the setLogin function
},
});
};
// Custom UI Alternative
// Use setLogin function after creating the connector.
/*
const auth = new AuthProvider(`${arcana_client_id}`) // Singleton
export const connector = (chains: Chain[]) => {
return new ArcanaConnector({
chains,
options: {
auth: auth
},
});
};
connector.setLogin({
provider: 'passwordless',
email: 'abc@example.com' //optional
})
*/
...
```
Single Provider Optimization
When using a single social login provider, specify it when creating ArcanaConnector to optimize onboarding. There's no need to use setLogin later in the custom login UI code.
For multiple social login providers, create ArcanaConnector without specifying a provider. Use the setLogin function later based on the user's choice.
### 2. Set up `WagmiConfig`
Use the `ArcanaConnector` and set up [Wagmi config](https://wagmi.sh/react/getting-started).
```
//Use "`auth-wagmi` version > v2.0.0"
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { Buffer } from 'buffer'
import React from 'react'
import ReactDOM from 'react-dom/client'
import { WagmiProvider } from 'wagmi'
import App from './App.tsx'
import { config } from './wagmi.ts'
import './index.css'
globalThis.Buffer = Buffer
const queryClient = new QueryClient()
ReactDOM.createRoot(document.getElementById('root')!).render(
,
)
```
### 3. Initialize WalletConnect App Component
```
//
// For apps using Wagmi versions v2.a.b and auth-wagmi v3.x.y
//
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { Buffer } from 'buffer'
import React from 'react'
import ReactDOM from 'react-dom/client'
import { WagmiProvider } from 'wagmi'
import App from './App.tsx'
import { config } from './wagmi.ts'
import './index.css'
globalThis.Buffer = Buffer
const queryClient = new QueryClient()
ReactDOM.createRoot(document.getElementById('root')!).render(
,
)
```
```
//
// For apps using Wagmi versions v1.a.b and auth-wagmi v2.x.y
//
function App({ Component, pageProps }: AppProps) {
return (
);
}
```
## What's Next?
Use `AuthProvider`, the EIP-1193 provider offered by the SDK, to call supported JSON/RPC functions and [Web3 wallet operations](../../../web3-ops/evm/) in the authenticated user's context.
## See also
**'WalletConnect'** integration example: See `sample-auth-walletconnect` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
- [FAQ](../../../../faq/faq-gen/)
- [Troubleshooting Guide](../../../../troubleshooting/)
- [Arcana Auth SDK Errors](../../../auth-error-msg/)
- [Arcana Auth SDK Usage Guide](../../../auth-usage-guide/)
Arcana Auth SDK Quick Links
- [Arcana Auth SDK Reference](https://authsdk-ref-guide.netlify.app/)
- [Release notes](../../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth)
Arcana Auth Wagmi SDK Quick Links
- [Arcana Auth Wagmi SDK Reference Guide](https://wagmi-authsdk-ref-guide.netlify.app/)
- [Release notes](../../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth-wagmi/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth-wagmi)
[Try Demo App](https://demo.arcana.network)
# Plug-and-Play Login UI
Use the built-in, [plug-and-play login UI modal](../../../../concepts/plug-and-play-auth/) to quickly onboard users in a 'WalletConnect' app integrated with the Arcana Auth Wagmi SDK.
Custom Login UI
You can onboard users through a [custom login UI](../../../../concepts/custom-login-ui/) instead of the [built-in plug-and-play](../../../../concepts/plug-and-play-auth/) one. See [how to use custom login UI](../walletconnect-custom-ui/) and onboard users in a 'WalletConnect' app.
## Prerequisites
- [Register](../../../../setup/config-auth/register-app/) the Wagmi app and configure SDK usage [settings for social login](../../../../setup/) providers, [manage app chains](../../../../setup/config-wallet-chains/) and [wallet user experience](../../../../setup/config-wallet/).
- Install the [required SDK packages](../../../sdk-installation/) for 'WalletConnect'.
- [Integrate](../../../integrate/wagmi/) 'WalletConnect' app and create `AuthProvider`, `ArcanaConnector`.
## Steps
### 1. Setup `WagmiConfig`
Use the `ArcanaConnector` created during app integration to set up [Wagmi config](https://wagmi.sh/react/getting-started).
```
//Use "`auth-wagmi` version > v2.0.0"
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { Buffer } from 'buffer'
import React from 'react'
import ReactDOM from 'react-dom/client'
import { WagmiProvider } from 'wagmi'
import App from './App.tsx'
import { config } from './wagmi.ts'
import './index.css'
globalThis.Buffer = Buffer
const queryClient = new QueryClient()
ReactDOM.createRoot(document.getElementById('root')!).render(
,
)
```
### 2. Set up `WagmiProvider`
Next, use the `WagmiProvider` with this specified Wagmi config and initialize `WagmiProvider` in the app.
```
//This example uses Arcana Wallet connector and Coinbase Wallet
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
import { coinbaseWallet, injected, walletConnect } from 'wagmi/connectors'
import { ArcanaConnector } from "@arcana/auth-wagmi";
import { getAuthProvider } from './arcanaConnector';
export const config = createConfig({
chains: [mainnet, sepolia],
connectors: [
injected(),
coinbaseWallet({ appName: 'Create Wagmi' }),
walletConnect({
projectId: '3fcc6bba6f1de962d911bb5b5c3dba68', //WalletConnect ProjectID
}),
ArcanaConnector(
{
auth: getAuthProvider(),
}
)
],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})
declare module 'wagmi' {
interface Register {
config: typeof config
}
}
```
## What's Next?
Use `AuthProvider`, the EIP-1193 provider offered by the SDK, to call supported JSON/RPC functions and [Web3 wallet operations](../../../web3-ops/evm/) in the authenticated user's context.
## See also
**'WalletConnect'** integration example: See `sample-auth-walletconnect` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
- [FAQ](../../../../faq/faq-gen/)
- [Troubleshooting Guide](../../../../troubleshooting/)
- [Arcana Auth SDK Errors](../../../auth-error-msg/)
Arcana Auth SDK Quick Links
- [Arcana Auth SDK Reference](https://authsdk-ref-guide.netlify.app/)
- [Release notes](../../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth)
Arcana Auth Wagmi SDK Quick Links
- [Arcana Auth Wagmi SDK Reference Guide](https://wagmi-authsdk-ref-guide.netlify.app/)
- [Release notes](../../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth-wagmi/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth-wagmi)
[Try Demo App](https://demo.arcana.network)
# Custom Login UI
Onboard users in a 'Web3-React' app integrated with the Arcana Auth SDK through a custom login UI.
Plug-and-Play Login UI
You can onboard users in a 'Web3-React' app faster through the built-in, [plug-and-play login UI](../../../../concepts/plug-and-play-auth/) instead of choosing to build a custom login UI. [Learn more...](../web3-react-pnp-ui/)
## Prerequisites
- [Register](../../../../setup/config-auth/register-app/) the Wagmi app and configure SDK usage [settings for social login](../../../../setup/) providers, [manage app chains](../../../../setup/config-wallet-chains/) and [wallet user experience](../../../../setup/config-wallet/).
- Install the [required SDK packages](../../../sdk-installation/) for 'Web3-React'.
- [Integrate](../../../integrate/wagmi/) 'Web3-React' app and create `AuthProvider`, `ArcanaConnector`.
## Steps
### 1. Configure `ArcanaConnector`
`ArcanaConnector` is created earlier as part of SDK integration. When using a custom login UI to onboard users, configure `ArcanaConnector` differently.
Add code in the custom UI for onboarding via social login and passwordless options by using the `setLogin` function.
#### Social Login
example/connectors/arcanaWallet.ts
```
// custom ui onboarding - google
import { ArcanaConnector } from "@arcana/auth-web3-react"
import { AuthProvider } from "@arcana/auth"
import { initializeConnector } from "@web3-react/core"
const auth = new AuthProvider(`${arcana_client_id}`) // Singleton
export const [authConnect, hooks] = initializeConnector(
(actions) =>
new ArcanaConnector(auth, {
actions,
login: {
provider: 'google',
} // either add here or in setLogin function
})
)
// Custom UI Alternative
// Use setLogin function after creating the connector.
/*
export const [authConnect, hooks] = initializeConnector(
(actions) =>
new ArcanaConnector(auth, {
actions,
})
)
authConnect.setLogin({ provider: 'google' })
*/
...
```
#### Passwordless Login
example/connectors/arcanaWallet.ts
```
//custom ui onboarding - passwordless
import { ArcanaConnector } from "@arcana/auth-web3-react"
import { AuthProvider } from "@arcana/auth"
import { initializeConnector } from "@web3-react/core"
const auth = new AuthProvider(`${arcana_client_id}`) // Singleton
export const [authConnect, hooks] = initializeConnector(
(actions) =>
new ArcanaConnector(auth, {
actions,
login: {
provider: 'passwordless',
email: 'abc@example.com'
} // either add here or in setLogin function
})
)
// Custom UI Alternative
// Use setLogin function after creating the connector.
/*
export const [authConnect, hooks] = initializeConnector(
(actions) =>
new ArcanaConnector(auth, {
actions,
})
)
authConnect.setLogin({ provider: 'passwordless', email: 'abc@example.com' })
*/
...
```
Single Provider Optimization
When using a single social login provider, specify it when creating ArcanaConnector to optimize onboarding. There's no need to use setLogin later in the custom login UI code.
For multiple social login providers, create ArcanaConnector without specifying a provider. Use the setLogin function later based on the user's choice.
### 2. Use `ArcanaConnector`
In the Web3-React app, use the `ArcanaConnector` created earlier and set up the required hooks:
```
import { useEffect, useState } from "react";
import { MAINNET_CHAINS } from "../../chains";
import { hooks, arcanaConnect } from "../../connectors/arcanaWallet";
import { Card } from "../Card";
const CHAIN_IDS = Object.keys(MAINNET_CHAINS).map(Number);
const {
useChainId,
useAccounts,
useIsActivating,
useIsActive,
useProvider,
useENSNames,
} = hooks;
export default function ArcanaConnectCard() {
const chainId = useChainId();
const accounts = useAccounts();
const isActivating = useIsActivating();
const isActive = useIsActive();
const provider = useProvider();
const ENSNames = useENSNames(provider);
const [error, setError] = useState(undefined);
// attempt to connect eagerly on mount
useEffect(() => {
arcanaConnect.connectEagerly().catch((error) => {
console.debug("Failed to connect eagerly to arcanaConnect", error);
});
}, []);
return (
);
}
```
Now, you are all set to onboard users in the Web3-React app using the custom login UI and enable Arcana wallet for the authenticated users.
pages/index.tsx
```
import ArcanaConnectCard from "../components/connectorCards/ArcanaConnectCard";
import CoinbaseWalletCard from "../components/connectorCards/CoinbaseWalletCard";
import GnosisSafeCard from "../components/connectorCards/GnosisSafeCard";
import MetaMaskCard from "../components/connectorCards/MetaMaskCard";
import NetworkCard from "../components/connectorCards/NetworkCard";
import WalletConnectCard from "../components/connectorCards/WalletConnectCard";
import WalletConnectV2Card from "../components/connectorCards/WalletConnectV2Card";
import ProviderExample from "../components/ProviderExample";
export default function Home() {
return (
<>
);
}
```
Web3-React App integrated with the Arcana Auth
## What's Next?
Use `AuthProvider`, the EIP-1193 provider offered by the SDK, to call supported JSON/RPC functions and [Web3 wallet operations](../../../web3-ops/evm/) in the authenticated user's context.
## See also
**'Web3-React'** integration example: See `sample-auth-web3-react` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
- [FAQ](../../../../faq/faq-gen/)
- [Troubleshooting Guide](../../../../troubleshooting/)
- [Arcana Auth SDK Errors](../../../auth-error-msg/)
- [Arcana Auth SDK Usage Guide](../../../auth-usage-guide/)
Arcana Auth SDK Quick Links
- [Arcana Auth SDK Reference](https://authsdk-ref-guide.netlify.app/)
- [Release notes](../../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth)
Arcana Auth Wagmi SDK Quick Links
- [Arcana Auth Wagmi SDK Reference Guide](https://wagmi-authsdk-ref-guide.netlify.app/)
- [Release notes](../../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth-wagmi/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth-wagmi)
[Try Demo App](https://demo.arcana.network)
# Plug-and-Play Login UI
Use the built-in, [plug-and-play login UI modal](../../../../concepts/plug-and-play-auth/) to quickly onboard users in a 'Web3-React' app integrated with the Arcana Auth Wagmi SDK.
Custom Login UI
You can onboard users through a [custom login UI](../../../../concepts/custom-login-ui/) instead of the [built-in plug-and-play](../../../../concepts/plug-and-play-auth/) one. See [how to use custom login UI](../web3-react-custom-ui/) and onboard users in a 'Web3-React' app.
## Prerequisites
- [Register](../../../../setup/config-auth/register-app/) the Wagmi app and configure SDK usage [settings for social login](../../../../setup/) providers, [manage app chains](../../../../setup/config-wallet-chains/) and [wallet user experience](../../../../setup/config-wallet/).
- Install the [required SDK packages](../../../sdk-installation/) for 'Web3-React'.
- [Integrate](../../../integrate/wagmi/) 'Web3-React' app and create `AuthProvider`, `ArcanaConnector`.
## Steps
### 1. Create `AuthProvider` and `ArcanaConnector`
```
import { initializeConnector } from "@web3-react/core";
import { ArcanaConnector } from "@arcana/auth-web3-react";
import { AuthProvider } from "@arcana/auth";
import { URLS } from "../chains";
const auth = new AuthProvider(
"xar_test_b2ddexxxxxxxxxxxxxxxxxxxx8b1fa3f" //App client ID via Dashboard
);
export const [arcanaConnect, hooks] = initializeConnector(
(actions) =>
new ArcanaConnector(auth, {
actions,
})
);
...
```
Compact Mode
While creating the `AuthProvider`, you can choose the [compact mode (optional)](../../../../concepts/plug-and-play-auth/#compact-modal) for the plug-and-play login UI.
### 2. Use `ArcanaConnector`
In the Web3-React app, use the `ArcanaConnector` and React hooks to connect `ArcanaConnector` with the Web3-React ecosystem via `ArcanaConnectCard`.
```
import { useEffect, useState } from "react";
import { MAINNET_CHAINS } from "../../chains";
import { hooks, arcanaConnect } from "../../connectors/arcanaWallet";
import { Card } from "../Card";
const CHAIN_IDS = Object.keys(MAINNET_CHAINS).map(Number);
const {
useChainId,
useAccounts,
useIsActivating,
useIsActive,
useProvider,
useENSNames,
} = hooks;
export default function ArcanaConnectCard() {
const chainId = useChainId();
const accounts = useAccounts();
const isActivating = useIsActivating();
const isActive = useIsActive();
const provider = useProvider();
const ENSNames = useENSNames(provider);
const [error, setError] = useState(undefined);
// attempt to connect eagerly on mount
useEffect(() => {
arcanaConnect.connectEagerly().catch((error) => {
console.debug("Failed to connect eagerly to arcanaConnect", error);
});
}, []);
return (
);
}
```
Now, you are all set to onboard users in the Web3-React app using the plug-and-play login UI and enable Arcana wallet for the authenticated users.
pages/index.tsx
```
import ArcanaConnectCard from "../components/connectorCards/ArcanaConnectCard";
import CoinbaseWalletCard from "../components/connectorCards/CoinbaseWalletCard";
import GnosisSafeCard from "../components/connectorCards/GnosisSafeCard";
import MetaMaskCard from "../components/connectorCards/MetaMaskCard";
import NetworkCard from "../components/connectorCards/NetworkCard";
import WalletConnectCard from "../components/connectorCards/WalletConnectCard";
import WalletConnectV2Card from "../components/connectorCards/WalletConnectV2Card";
import ProviderExample from "../components/ProviderExample";
export default function Home() {
return (
<>
);
}
```
Web3-React App integrated with the Arcana Auth
## What's Next?
Use `AuthProvider`, the EIP-1193 provider offered by the SDK, to call supported JSON/RPC functions and [Web3 wallet operations](../../../web3-ops/evm/) in the authenticated user's context.
## See also
**'Web3-React'** integration example: See `sample-auth-web3-react` submodule in [SDK Example GitHub repository.](https://github.com/arcana-network/auth-examples)
- [FAQ](../../../../faq/faq-gen/)
- [Troubleshooting Guide](../../../../troubleshooting/)
- [Arcana Auth SDK Errors](../../../auth-error-msg/)
Arcana Auth SDK Quick Links
- [Arcana Auth SDK Reference](https://authsdk-ref-guide.netlify.app/)
- [Release notes](../../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth)
Arcana Auth Wagmi SDK Quick Links
- [Arcana Auth Wagmi SDK Reference Guide](https://wagmi-authsdk-ref-guide.netlify.app/)
- [Release notes](../../../../relnotes/latest-auth-release-note/)
- [Changelog](https://github.com/arcana-network/auth-wagmi/releases)
- [Download SDK](https://www.npmjs.com/package/@arcana/auth-wagmi)
[Try Demo App](https://demo.arcana.network)
# EVM Wallet Ops
The Arcana wallet supports [standard Ethereum JSON-RPC specification API](https://ethereum.org/en/developers/docs/apis/json-rpc/) via the `AuthProvider`.
Non-EVM Chains
Note that the JSON/RPC functions and Web3 wallet operations supported by the `AuthProvider` may vary across EVM chains and other chains such as [Solana](../solana/), [MultiversX](../mvx/), [Near](../near/), etc.
## Prerequisites
- [Register](../../../setup/config-auth/register-app/) the Near app and configure SDK usage [settings for social login](../../../setup/) providers, [manage app chains](../../../setup/config-wallet-chains/) and [wallet user experience](../../../setup/config-wallet/).
- Install the [required SDK packages](../../sdk-installation/), integrate the SDK with the app and create `AuthProvider`.
## Handle Events
```
const auth = new AuthProvider(
"xar_test_445007f942xxxxxxxxxxxxxxxxxx484cAfd2", // App client ID
)
```
```
try {
await auth.init()
} catch (e) {
// Handle exception case
}
```
```
// Assuming Auth SDK is integrated and initialized
try {
provider = auth.provider
const connected = await auth.isLoggedIn()
console.log({ connected })
setHooks()
} catch (e) {
// Handle exception case
}
// setHooks: Manage chain or account switch in Arcana wallet
function setHooks() {
provider.on('connect', async (params) => {
console.log({ type: 'connect', params: params })
const isLoggedIn = await auth.isLoggedIn()
console.log({ isLoggedIn })
})
provider.on('accountsChanged', (params) => {
//Handle
console.log({ type: 'accountsChanged', params: params })
})
provider.on('chainChanged', async (params) => {
console.log({ type: 'chainChanged', params: params })
})
}
```
## Supported Web3 Operations
- `eth_getBalance`
- `eth_accounts`
- `eth_signTransaction`
- `eth_sendTransaction`
- `wallet_addEthereumChain`
- `wallet_switchEthereumChain`
- `wallet_watchAsset`
- `_arcana_getAccountType`
- `_arcana_switchAccountType`
### Get Accounts
```
// get from eth_accounts
let from = ''
async function getAccounts() {
console.log('Requesting accounts')
try {
const accounts = await provider.request({ method: 'eth_accounts' })
console.log({ accounts })
from = accounts[0] // Use this account address to get wallet balance
} catch (e) {
console.log({ e })
}
}
```
### Get Balance
```
let balance = ''
async function getBalance() {
console.log('Requesting Balance')
try {
provider.request({ method: 'eth_getBalance' }).then((balance) => {
// convert a currency unit from wei to ether
const balanceInEth = ethers.utils.formatEther(balance)
console.log(`balance: ${balanceInEth} ETH`)
})
} catch (e) {
console.log({ e })
}
}
```
### Add Network
Only EVM Chains
Apps can programmatically add only the EVM-compatible chains to the preconfigured chain list if not already present.
The `wallet_addEthereumChain` method is specified by [EIP-3085](https://eips.ethereum.org/EIPS/eip-3085).
```
try {
await provider.request({
method: 'wallet_addEthereumChain',
params: [{
chainId: '0xABCDEF',
chainName: 'My Custom Chain',
rpcUrls: ['...']
}]
})
} catch(error) {
...
}
// Parameters
// wallet_addEthereumChain accepts a single object parameter,
// specified by the AddEthereumChainParameter TypeScript interface
interface AddEthereumChainParameter {
chainId: string; // A 0x-prefixed hexadecimal string
chainName: string;
nativeCurrency: {
name: string;
symbol: string; // 2-6 characters long
decimals: 18;
};
rpcUrls: string[];
blockExplorerUrls?: string[];
}
```
### Switch Network
This method is specified by [EIP-3326](https://eips.ethereum.org/EIPS/eip-3326).
Chain Switching
Apps can programmatically switch to another chain as long as it is of the same chain type. If an app is configured to use EVM chains, you cannot switch to a non-EVM chain and vice-versa.
```
try {
await provider.request({
method: 'wallet_switchEthereumChain',
params: [{ chainId: '0xf00' }],
});
} catch(error) {
...
}
interface SwitchEthereumChainParameter {
chainId: string; // A 0x-prefixed hexadecimal string
}
```
Network Switch Error
If the error code (error.code) is 4902, then the requested chain has not been added, and you have to request to add it via `wallet_addEthereumChain`.
### Get Account Type
```
const accountType = await auth.provider.request({
method: "_arcana_getAccountType",
});
console.log(accountType);
```
### Watch Assets
```
async function watchAsset() {
setRequest('eth_sendTransaction')
const hash = await provider.request({
method: 'wallet_watchAsset',
params: {
type: 'ERC20',
options: {
address: '0xB983E01458529665007fF7E0CDdeCDB74B967Eb6',
symbol: 'FOO',
decimals: 18,
image: 'https://foo.io/token-image.svg',
},
},
})
console.log({ hash })
}
```
### Sign Transaction
```
async function signTransaction() {
const { sig } = await auth. provider.request({
method: 'eth_signTransaction',
params: [
{
from: "0xEB014f8c8B418Db6b45774c326A0E64C78914dC0",
gasPrice: "20000000000",
gas: "21000",
to: '0x3535353535353535353535353535353535353535',
value: "1000000000000000000",
data: "some data"
},
],
})
console.log({ sig })
}
```
### Send Transactions
```
const auth = new AuthProvider(
"xar_test_445007f942xxxxxxxxxxxxxxxxxx484cAfd2", // App client ID
)
```
```
try {
await auth.init()
} catch (e) {
// Handle exception case
}
```
```
async function sendTransaction() {
setRequest('eth_sendTransaction')
const hash = await auth.provider.request({
method: 'eth_sendTransaction',
params: [{
from,
gasPrice: 0,
to: '0xE28F01Cf69f27Ee17e552bFDFB7ff301ca07e780',
value: '0x0de0b6b3a7640000',
},],
})
console.log({ hash })
}
```
Send Transaction
Approve/Reject Send Transaction
### Show Wallet
Apps that use `alwaysVisible=false` when initializing the `AuthProvider` can use `showWallet` to display it in the app's context when required.
```
import { AuthProvider } from '@arcana/auth'
try {
const auth = new AuthProvider(
"xar_test_445007f942xxxxxxxxxxxxxxxxxx484cAfd2", // App client ID
{
position: 'left', // default: right
theme: 'light', // default: dark
alwaysVisible: false,
}
)
await auth.init()
await auth.showWallet()
} catch (e) {
// Handle exception case
}
```
Arcana Wallet
# MultiversX Wallet Ops
Use `AuthProvider`, the standard EIP-1193 Ethereum provider offered by the Arcana Auth SDK, for issuing Web3 wallet operations via the Arcana wallet.
## Prerequisites
- [Register](../../../setup/config-dApp-with-db-for-mvx/) the app and configure SDK usage [settings for social login](../../../setup/) providers, [manage app chains](../../../setup/config-wallet-chains/) and [wallet user experience](../../../setup/config-wallet/).
- Install the [required SDK packages](../../sdk-installation/) as per the app type, [integrate the SDK](../../integrate/mvx/) and create `AuthProvider`.
## Supported Web3 Operations
- `mvx_signMessage`
- `mvx_signTransaction`
- `mvx_signTransactions`
- `getAccounts`
- `getPublicKey`
Other MultiversX wallet connect JSON RPC methods listed [here](https://docs.multiversx.com/integrators/walletconnect-json-rpc-methods/) are not supported at the moment.
### `getAccounts`
```
// Integrate App with the Auth SDK
const { AuthProvider } = window.arcana.auth
let provider
let from = ''
const auth = new AuthProvider('xar_dev_34-arcana-registered-client-id-xxxxx')
provider = auth.provider
...
//Initialize AuthProvider
await auth.init()
// Get Accounts
try {
const accounts = await provider.request({ method: 'getAccounts' })
from = accounts[0]
} catch (e) {
console.log({ e })
}
// Returns an array of public keys
// ["pub-key-1"]
```
### `getPublicKey`
```
// Integrate App with the Auth SDK
const { AuthProvider } = window.arcana.auth
let provider
let from = ''
const auth = new AuthProvider('xar_dev_34-arcana-registered-client-id-xxxxx')
provider = auth.provider
...
//Initialize AuthProvider
await auth.init()
//Get Public Key
await provider.request({
method: "getPublicKey",
params: [from],
});
// Returns public key
// {pk: "some-pub-key"}
```
### `SignMessage`
```
// Integrate App with the Auth SDK
const { AuthProvider } = window.arcana.auth
let provider
let from = ''
const auth = new AuthProvider('xar_dev_34-arcana-registered-client-id-xxxxx')
provider = auth.provider
...
//Initialize AuthProvider
await auth.init()
// Get Accounts
try {
const accounts = await provider.request({ method: 'getAccounts' })
from = accounts[0]
} catch (e) {
console.log({ e })
}
// Onboard users via plug-n-play login or custom login UI
// auth.connect() or auth.loginWithSocial
try {
const provider = await auth.connect()
console.log({ provider })
} catch (error) {
console.log({ error })
}
...
// For authenticated users, add code for signing message
const personalSign = await provider.request({
method: 'mvx_signMessage',
params: {
message: 'SignMessage to test MultiversX signmessage',
address: from,
},
})
// Returns signature object
// {signature: "some-sig"}
```
### `SignTransaction`
```
// Integrate App with the Auth SDK
const { AuthProvider } = window.arcana.auth
let provider
let from = ''
const auth = new AuthProvider('xar_dev_34-arcana-registered-client-id-xxxxx')
provider = auth.provider
...
//Initialize AuthProvider
await auth.init()
// Get Accounts
try {
const accounts = await provider.request({ method: 'getAccounts' })
from = accounts[0]
} catch (e) {
console.log({ e })
}
// Onboard users via plug-n-play login or custom login UI
// auth.connect() or auth.loginWithSocial
try {
const provider = await auth.connect()
console.log({ provider })
} catch (error) {
console.log({ error })
}
...
// For authenticated users, add code for signing transaction
const params = {
transaction: {
gasLimit: 100000,
sender: from,
receiver:
'erdXXXXXXXX-some-address-YYYYYYYYYY',
value: '0.01',
chainID: 'T',
data: 'helloWorld-from MultiversX',
version: 1,
},
}
const data = await provider.request({
method: 'mvx_signTransaction',
params,
})
// Returns signature object
// {signature: "some-sig", options: 0, version: 1}
```
### `SignTransactions`
```
// Integrate App with the Auth SDK
const { AuthProvider } = window.arcana.auth
let provider
let from = ''
const auth = new AuthProvider('xar_dev_34-arcana-registered-client-id-xxxxx')
provider = auth.provider
...
//Initialize AuthProvider
await auth.init()
// Get Accounts
try {
const accounts = await provider.request({ method: 'getAccounts' })
from = accounts[0]
} catch (e) {
console.log({ e })
}
// Onboard users via plug-n-play login or custom login UI
// auth.connect() or auth.loginWithSocial
try {
const provider = await auth.connect()
console.log({ provider })
} catch (error) {
console.log({ error })
}
...
// For authenticated users, add code for signing transaction
const transaction = {
gasLimit: 100000,
sender: from,
receiver: "erdXXXXXXXX-some-address-YYYYYYYYYY",
value: "0.001",
chainID: "T",
data: "helloWorld-from MultiversX",
version: 1,
};
const params = {
// You can use multiple transactions, this sample just
// repeats the same one.
transactions: [transaction, transaction, transaction],
};
const data = await provider.request({
method: 'mvx_signTransactions',
params,
})
//Returns Signature Object - see format below
//
// {
// signatures: [
// {signature: "some-sig-1", options: 0, version: 1},
// {signature: "some-sig-2", options: 0, version: 1},
// {signature: "some-sig-3", options: 0, version: 1}
// ]
// }
```
# Near Wallet Ops
The Arcana wallet supports [standard Ethereum JSON-RPC specification API](https://ethereum.org/en/developers/docs/apis/json-rpc/) via the `AuthProvider`.
## Prerequisites
- [Register](../../../setup/config-dApp-with-db-for-near/) the Near app and configure SDK usage [settings for social login](../../../setup/) providers, [manage app chains](../../../setup/config-wallet-chains/) and [wallet user experience](../../../setup/config-wallet/).
- Install the [required SDK packages](../../sdk-installation/) as per the app type, [integrate the SDK](../../integrate/near/) and create `AuthProvider`.
## Supported Web3 Operations
- `getAccounts`
- `near_signMessage`
- `near_signAndSendTransaction`
### `getAccounts`
```
// Integrate App with the Auth SDK
const { AuthProvider } = window.arcana.auth
let provider
let from = ''
const auth = new AuthProvider('xar_dev_34-arcana-registered-client-id-xxxxx')
provider = auth.provider
//Initialize AuthProvider
await auth.init()
...
// User login add code via plug and play `connect` or custom login UI
// auth.connect() or auth.loginWithSocial
// Get User Account address post login
try {
const accounts = await provider.request({ method: 'getAccounts' })
from = accounts[0]
} catch (e) {
console.log({ e })
}
```
### `SignMessage`
```
// Integrate App with the Auth SDK
const { AuthProvider } = window.arcana.auth
let provider
let from = ''
const auth = new AuthProvider('xar_dev_34-arcana-registered-client-id-xxxxx')
provider = auth.provider
//Initialize AuthProvider
await auth.init()
// Onboard users via plug-n-play login or custom login UI
// auth.connect() or auth.loginWithSocial
try {
const provider = await auth.connect()
console.log({ provider })
} catch (error) {
console.log({ error })
}
// Get User Account address
try {
const accounts = await provider.request({ method: 'getAccounts' })
from = accounts[0]
} catch (e) {
console.log({ e })
}
// For authenticated users, add code for signing message
import base58 from "bs58";
const message = base58.encode(Buffer.from("This is a test message for trying 'SignMessage'."));
const signedMessage = await auth.provider.request({
method: "near_signMessage",
params: { message },
});
console.log(signedMessage);
```
### `SignAndSendTransaction`
```
// Integrate App with the Auth SDK
const { AuthProvider } = window.arcana.auth
let provider
let from = ''
const auth = new AuthProvider('xar_dev_34-arcana-registered-client-id-xxxxx')
provider = auth.provider
...
//Initialize AuthProvider
await auth.init()
// Onboard users via plug-n-play login or custom login UI
// auth.connect() or auth.loginWithSocial
try {
const provider = await auth.connect()
console.log({ provider })
} catch (error) {
console.log({ error })
}
...
// Get Accounts
try {
const accounts = await provider.request({ method: 'getAccounts' })
from = accounts[0]
} catch (e) {
console.log({ e })
}
// Get Receiver Account address
// Read from app user interface
// receiver = Buffer.to('input address')
...
// For authenticated users, add code for signing transaction
const transaction = {
receiverId: receiver,
actions: [
{
transfer: {
deposit: BigInt(1000),
},
},
{
transfer: {
deposit: BigInt(1000),
},
},
{
transfer: {
deposit: BigInt(1000),
},
},
],
}
const signedTransaction = await auth.provider.request({
method: "near_signAndSendTransaction",
params: { transaction },
});
console.log(signedTransaction);
```
# Solana Wallet Ops
Solana chain is a bit different from typical EVM chains in how it [supports Solana JSON-RPC calls](https://docs.solana.com/api/http) and Web3 wallet operations.
## Prerequisites
- [Register](../../../setup/config-dApp-with-db-for-Solana/) the Solana app and configure SDK usage [settings for social login](../../../setup/) providers, [manage app chains](../../../setup/config-wallet-chains/) and [wallet user experience](../../../setup/config-wallet/).
- Install the [required SDK packages](../../sdk-installation/) as per the app type, [integrate the SDK](../../integrate/solana/) and create `AuthProvider`. Make sure you also initialize the `Solana Provider`.
```
import { AuthProvider } from '@arcana/auth'
```
```
const auth = new AuthProvider(
"xar_test_445007f942xxxxxxxxxxxxxxxxxx484cAfd2", // App client ID
{
alwaysVisible: false, // default: true, wallet always visible
connectOptions: {
compact: true // default: false, regular plug-and-play login UI
},
position: 'left', // default: right
setWindowProvider: true, // default: false, window.ethereum not set
theme: 'light', // default: dark
})
```
```
try {
await auth.init()
} catch (e) {
// Handle exception case
}
```
Solana apps can use the `auth.provider` to make standard JSON RPC calls in the context of an authenticated user.
```
const provider = auth.provider;
```
Use the Solana provider for issuing Solana Web3 wallet operations in the context of an authenticated user.
```
const solanaP = auth.solana;
```
## Supported Web3 Wallet Operations
### Get Public Key
```
import SolanaWeb3 from "@solana/web3.js";
const provider = auth.provider;
const accounts = await auth.provider.request({
method: "getAccounts",
params: [],
});
const publicKey = new SolanaWeb3.PublicKey(accounts[0])
console.log(publicKey);
```
The `publicKey` is returned as a string: ["your-public-key-in-string-format"].
## Supported JSON/RPC Functions
- `signMessage`
- `signTransaction`
- `signAllTransactions`
- `signAndSendTransaction`
### `SignMessage`
```
const message = `Sign below to authenticate with CryptoCorgis to avoid digital dognappers`;
const encodedMessage = new TextEncoder().encode(message);
// To get a proper signature, the second parameter in signMessage call
// can be either "hex" or "utf8", depending on what kind of message we are signing.
// For plaintext, use "utf8";
// For hex message, use "hex"
try {
const signature = await solanaP.signMessage(encodedMessage, "hex");
window.solanaSig = signature;
console.log(signature);
} catch (e) {
console.error(e);
}
```
#### Signature Format
```
{
signature: Uint8Array // Encode it by using `bs58.encode(signature)`
// to get the string format. See npm library: bs58
publicKey: BN // Use `new SolanaWeb3.PublicKey(publicKey)`
// to get the 'BN' string format. See npm library: @solana/web3.js
}
```
### `SignTransaction`
```
try {
const pk = new SolanaWeb3.PublicKey(auth.solana.publicKey)
const connection = new SolanaWeb3.Connection(
SolanaWeb3.clusterApiUrl("testnet") // can be "devnet", "testnet" or "mainnet-beta"
);
const minRent = await connection.getMinimumBalanceForRentExemption(0);
const blockhash = await connection.getLatestBlockhash().then((res) => res.blockhash);
const payer = auth.solana
const instructions = [
SolanaWeb3.SystemProgram.transfer({
fromPubkey: pk,
toPubkey: pk,
lamports: minRent // lamports is the minimum unit of solana, like wei is for Ethereum. 1 SOL = 10^9 Lamports
})
];
// Compiles the message to V0 format
const messageV0 = new SolanaWeb3.TransactionMessage({
payerKey: pk,
recentBlockhash: blockhash,
instructions
}).compileToV0Message();
const transaction = new SolanaWeb3.VersionedTransaction(messageV0);
// sign your transaction with the required `Signers`
const signature = await payer.signTransaction(transaction);
} catch (e) {
console.error(e);
}
```
#### Signature Format
```
{
signatures: [Uint8Array],
message: {
header: {
numRequiredSignatures: 1,
numReadonlySignedAccounts: 0,
numReadonlyUnsignedAccounts: 1
},
staticAccountKeys: [
StaticAccountKey1, // In string format
StaticAccountKey2 // In string format
],
recentBlockhash: LatestBlockHashSubmittedWhileSigning, // In string format
compiledInstructions: [
{
programIdIndex: 1,
accountKeyIndexes: [
0,
0
],
data: Uint8Array // Data that was signed
],
addressTableLookups: [] // Not sure what is this, will need to check, but we can pass this during signing
}
}
```
### `SignAllTransactions`
```
try {
const pk = new SolanaWeb3.PublicKey(auth.solana.publicKey);
const connection = new SolanaWeb3.Connection(
window.solanaWeb3.clusterApiUrl("testnet")
);
const minRent = await connection.getMinimumBalanceForRentExemption(0);
const blockhash = await connection.getLatestBlockhash().then((res) => res.blockhash);
const payer = auth.solana;
const instructions = [
SolanaWeb3.SystemProgram.transfer({
fromPubkey: pk,
toPubkey: pk,
lamports: minRent,
}),
];
const messageV0 = new SolanaWeb3.TransactionMessage({
payerKey: pk,
recentBlockhash: blockhash,
instructions,
}).compileToV0Message();
const transaction = new SolanaWeb3.VersionedTransaction(messageV0);
// sign your transaction with the required `Signers`
const signatures = await payer.signAllTransactions([
transaction,
transaction,
transaction,
]); // Should/can send multiple different transactions,
// right now sending 1 transaction multiple times just as an example
} catch (e) {
console.error(e);
}
```
The signature format here is same as above with a minor difference:
```
[Signature0, Signature1, Signature2, and so on]
```
### `SignAndSendTransaction`
```
try {
const pk = new SolanaWeb3.PublicKey(auth.solana.publicKey);
const connection = new SolanaWeb3.Connection(
SolanaWeb3.clusterApiUrl("testnet")
);
const minRent = await connection.getMinimumBalanceForRentExemption(0);
const blockhash = await connection.getLatestBlockhash().then((res) => res.blockhash);
const payer = auth.solana; // Arcana Solana API
const instructions = [
SolanaWeb3.SystemProgram.transfer({
fromPubkey: pk,
toPubkey: pk,
lamports: minRent,
}),
];
const messageV0 = new SolanaWeb3.TransactionMessage({
payerKey: pk,
recentBlockhash: blockhash,
instructions,
}).compileToV0Message();
const transaction = new SolanaWeb3.VersionedTransaction(messageV0);
// sign your transaction with the required `Signers`
const txHash = await payer.signAndSendTransaction(transaction);
} catch (e) {
console.error(e);
}
```
#### Response Format
```
{
publicKey: BN,
signature: Uint8Array // This is the transaction hash itself
// we can verify this in solana explorer,
// need to convert it to string first using `bs58.encode(signature)`
}
```
# Unity Web3 Wallet Operations
Use `AuthProvider`, the standard EIP-1193 Ethereum provider offered by the Arcana Auth SDK, to call Web3 wallet operations in Unity apps.
## Supported Web3 Operations
Call `Request` to make Web3 Wallet operation requests from within the app context. Provide the 'method' parameter for any supported Web3 wallet operations.
Supported Wallet Operations
The supported methods in the `Request` function may vary depending on the selected blockchain network, EVM chains, or non-EVM chains, such as Solana or MultiversX. See the [supported JSON/RPC Web3 operations](../evm/) for a list of chain-specific methods supported via the `Request` call of the Arcana Auth Unity SDK.
```
responseTextField.text = "";
if (parameters.text != null)
{
response = (await arcanaSDK.Request(new RequestParams {
Method = method.text,
Params = JsonConvert.DeserializeObject(parameters.text)
})).ToString();
}
else
{
response = (await arcanaSDK.Request(new RequestParams {
Method = method.text,
})).ToString();
}
```