# Use Magic with kernel.js

Magic is an embedded wallet provider that allows users to generate wallets scoped to your application via Social Logins, Email OTP, or Webauthn.

## Set up

You must first create an app that utilizes Magic.

- Follow the directions on the [Magic documentation site](https://magic.link/docs/home/welcome) to set up an app that integrates the Magic SDK
- Magic also offers a cli to generate a starter project which can be found [here](https://magic.link/posts/magic-vue#cli-quickstart-tool).

## Integration
Using kernel.js with Magic is very straightforward once you have the Magic sdk set up. Magic will provide you with an EOA wallet that we can use as a signer for the Kernel account.

### Create the Magic object
After following the directions from the Magic docs you should have access to a MagicBase object like so.

import { Magic as MagicBase } from 'magic-sdk';

const magic = new MagicBase(process.env.MAGIC_API_KEY as string, {
  network: {
    rpcUrl: getNetworkUrl(),
    chainId: getChainId(),
  },
  extensions: [new AuthExtension(), new OAuthExtension()],
});

### Use with kernel.js

import { createEcdsaKernelAccountClient } from '@kerneljs/presets/zerodev';
import { polygonMumbai } from 'viem/chains';
// TODO import providerToSmartAccountSigner helper function

// Get the Provider from Magic and convert it to a SmartAccountSigner
const magicProvider = await magic.wallet.getProvider();
const smartAccountSigner = providerToSmartAccountSigner(magicProvider);

// Set up your Kernel client
const kernelClient = await createEcdsaKernelAccountClient({
  chain: polygonMumbai,
  projectId: process.env.ZERODEV_PROJECT_ID,
  signer: smartAccountSigner,
});

const kernelAddress = kernelClient.account.address;

## TODO Proposed kernel.js Helper function

import { walletClientToCustomSigner } from 'permissionless';

function providerToSmartAccountSigner(provider: any) {
  const [account] = await provider.request({ method: 'eth_requestAccounts' });
  const walletClient = createWalletClient({
    account: account as Hex,
    transport: custom(provider),
  })

  return walletClientToCustomSigner(walletClient);
}