# Getting Started

URL: https://docs.blux.cc/getting-started

From zero to a working Blux integration — the whole flow in one page.

This page walks you through the full path to a working integration, from creating your app to letting users log in. Each step links to a deeper page if you want more detail.

A coding agent can follow the same path from [Agent skills](/agent-skills): [https://docs.blux.cc/SKILLS.md](https://docs.blux.cc/SKILLS.md).

The flow looks like this:

1. **Create an app in the Dashboard** and grab your App ID.
2. **Pick a package** — React or core (vanilla JS) — and install it.
3. **Initialize Blux** with `createConfig` / `BluxProvider`, passing your App ID.
4. **Customize** appearance, login methods, language, and wallets in the config.
5. **Use it** — open the built-in modals (`login`, `fundMe`, `profile`) or call the data hooks/functions.

---

## 1. Create your app & get an App ID

Sign in at [dashboard.blux.cc](https://dashboard.blux.cc), create an app, and copy its **App ID**. The dashboard is also where you manage users, analytics, access rules, and which login providers are enabled.

<Card title="Dashboard →" href="/dashboard" description="Create an app, get your App ID, and manage everything outside your code." />

## 2. Pick a package & install

Choose based on your stack — `@bluxcc/react` for React/Next.js/Vite, or `@bluxcc/core` for any other JavaScript project.

<Tabs items={['React', 'JavaScript']} defaultIndex={0}>
<Tab value="React">
```bash
npm install @bluxcc/react
```
</Tab>
<Tab value="JavaScript">
```bash
npm install @bluxcc/core
```
</Tab>
</Tabs>

<Cards>
  <Card title="React setup →" href="/react" description="For React, Next.js, Vite, and CRA." />
  <Card title="JavaScript setup →" href="/javascript" description="For framework-agnostic or vanilla JS." />
</Cards>

## 3. Initialize Blux

Wrap your app with `BluxProvider` (React) or call `createConfig` once at startup (vanilla JS). The only required option is `appId`. Leave out `networks` and the app uses Mainnet. Leave out `appName` and Blux uses `"App"`. See [Networks](/configuration/networks).

<Tabs items={['React', 'Vanilla JS']} defaultIndex={0}>
<Tab value="React">
```tsx

<BluxProvider
  config={{
    appId: "your-app-id",
  }}
>
  {children}
</BluxProvider>
```
</Tab>
<Tab value="Vanilla JS">
```ts

createConfig({
  appId: "your-app-id",
});
```
</Tab>
</Tabs>

## 4. Customize the config

Everything below is optional — Blux ships with sensible defaults. Add what you need to the same `config` object.

- **Appearance** — match your branding (colors, fonts, radius). → [Appearance](/configuration/appearance)
- **Login methods** — choose which auth options appear and in what order. → [Login Methods](/configuration/login-methods)
- **Wallets** — reorder with [`orderWallets`](/configuration/order-wallets) or hide some with [`excludeWallets`](/configuration/exclude-wallets); configure [Trezor](/configuration/trezor).
- **Language** — set the UI language. → [Language](/configuration/language)

### Enabling login methods

Add the methods you want to the `loginMethods` array — order determines display order:

```ts
createConfig({
  appId: "your-app-id",
  networks: [core.networks.mainnet],
  loginMethods: ["wallet", "email", "passkey", "google", "meta"],
});
```

| Method | How to enable |
|---|---|
| **Wallet** | Add `"wallet"` to `loginMethods`. Connects Freighter, xBull, Trezor, Ledger, and more. |
| **Email** | Add `"email"` — users get a one-time code by email. |
| **SMS** | Add `"sms"` — users get a one-time code by phone. |
| **Passkey** | Add `"passkey"` — passwordless sign-in via Face ID / Touch ID / security key. |
| **Socials** | Add a [supported provider key](/dashboard/socials) (for example, `"google"`, `"farcaster"`, or `"github"`) **and** enable that provider in the dashboard. |

<Callout type="warn">
  Social providers must be turned on for your `appId` in the dashboard before they appear in the modal — adding them to `loginMethods` alone isn't enough. See [Socials](/dashboard/socials).
</Callout>

## 5. Use Blux

Once initialized, you can use **built-in modals**, build a **white-label login UI**, or call **data hooks/functions**. Hosted actions and session state are exposed by `useBlux` in React and the `blux` object in vanilla JavaScript.

### Built-in modals

<Tabs items={['React', 'Vanilla JS']} defaultIndex={0}>
<Tab value="React">
```tsx

function App() {
  const { login, fundMe, profile, isAuthenticated } = useBlux();
  // login()   → open the auth modal
  // fundMe()  → open the on-ramp modal
  // profile() → open the account modal
}
```
</Tab>
<Tab value="Vanilla JS">
```ts

blux.login();   // open the auth modal
blux.fundMe();  // open the on-ramp modal
blux.profile(); // open the account modal
```
</Tab>
</Tabs>

<Cards>
  <Card title="Login" href="/react/usage/login" description="Authenticate users with the built-in modal." />
  <Card title="White-label Login" href="/react/usage/white-label-login" description="Build your own login UI with dedicated React hooks." />
  <Card title="Fund Me" href="/react/usage/fund-me" description="Let users on-ramp fiat into their wallet." />
  <Card title="Profile" href="/react/usage/profile" description="Account management — receive, send, swap, activity." />
  <Card title="Send Transaction" href="/react/usage/send-transaction" description="Submit a signed transaction with a confirmation modal." />
</Cards>

### Data hooks & functions

When you want to build your own UI, read chain data and call contracts directly:

- **Account data** — balances, transactions, payments, offers, and more. → [React hooks](/react/hooks) · [Core functions](/javascript/core)
- **Soroban contracts** — read and write smart contracts. One read: [`useReadContract`](/react/hooks/use-read-contract) / [`readContract`](/javascript/core/readContract). Several reads at once: [`useReadContracts`](/react/hooks/use-read-contracts) / [`readContracts`](/javascript/core/readContracts). Writes: [`useWriteContract`](/react/hooks/use-write-contract) / [`writeContract`](/javascript/core/writeContract).

<Callout type="info">
  That's the whole loop: configure once, then mix built-in modals with hooks/functions however your app needs. Try it all in the [live demo →](https://demo.blux.cc)
</Callout>