# Login Methods

URL: https://docs.blux.cc/configuration/login-methods

Control which authentication methods are available in the Blux login modal.

The `loginMethods` option defines which authentication methods are shown in the login modal. The order of the array also determines the display order — so the first item in the list will appear most prominently during onboarding.

## Type
```ts
loginMethods?: Array<
  | 'wallet'
  | 'email'
  | 'sms'
  | 'passkey'
  | 'google'
  | 'farcaster'
  | 'tiktok'
  | 'linkedin'
  | 'twitch'
  | 'kick'
  | 'spotify'
  | 'instagram'
  | 'apple'
  | 'discord'
  | 'github'
  | 'meta'
  | 'telegram'
  | 'microsoft'
  | 'gitlab'
  | 'twitter'
  | 'steam'
>;
```

## Usage

<Tabs items={['React', 'Vanilla JS']} defaultIndex={0}>
<Tab value="React">
```tsx
<BluxProvider
  config={{
    loginMethods: ["wallet", "email", "sms", "passkey"],
  }}
>
  {children}
</BluxProvider>
```
</Tab>
<Tab value="Vanilla JS">
```ts
createConfig({
  loginMethods: ["wallet", "email", "sms", "passkey"],
});
```
</Tab>
</Tabs>

## Passkeys

Add `'passkey'` to `loginMethods` to let users sign in with a **passkey** — a passwordless credential backed by their device's biometrics (Face ID, Touch ID, Windows Hello) or a hardware security key. There's no seed phrase to manage and nothing to install, which makes it one of the smoothest onboarding paths for users who are new to Stellar.

```ts
createConfig({
  loginMethods: ["passkey", "wallet", "email"],
});
```

## Social login

Blux supports **Google, Farcaster, TikTok, LinkedIn, Twitch, Kick, Spotify, Instagram, Apple, Discord, GitHub, Meta, Telegram, Microsoft, GitLab, X, and Steam**. Add their provider keys to `loginMethods` to show them in the modal:

```ts
createConfig({
  loginMethods: ["google", "farcaster", "github", "email"],
});
```

<Callout type="warn">
  Social providers must first be **enabled for your app in the [Blux Dashboard](/dashboard)**. Each provider you add to `loginMethods` has to be turned on there for your `appId`, otherwise it won't appear in the modal. See [Socials](/dashboard/socials) for setup.
</Callout>

## White-label login

`loginMethods` also authorizes the headless methods used by your own login UI. The core SDK exports `loginEmail`, `loginSms`, `loginOAuth`, `loginPasskey`, and `loginWallet`; the React package provides a corresponding hook for each one.

<Callout type="info">
  Learn how to build the complete flow in [JavaScript](/javascript/usage/white-label-login) or [React](/react/usage/white-label-login).
</Callout>

<Callout type="info">
  Want to see the login methods in action? [Try the live demo →](https://demo.blux.cc)
</Callout>