The fastest way to get started with Magic is to bootstrap your project using
make-magic, an easy-to-use CLI tool that generates a fully working application with Magic built in.
To get started, use the following command in your preferred shell:
The tool will guide you through setting up your project with a series of interactive prompts, starting with your project's name. Alternatively, you can use the command from your Magic Dashboard after you create a new project. This will include pre-configured flags to skip most of the prompts.
After entering a name, you’ll be asked to choose between two starting configurations:
- Custom Setup
Quickstart for the simplest setup. This option bootstraps a Next.js project that connects to the Polygon Mumbai test network using our Dedicated Wallet.
The Dedicated Wallet is a white-label wallet you can use to tailor the wallet experience to your app and users. It supports over 20 blockchains, has a suite of enterprise features, and gives you broad control over the user authentication, onboarding, and wallet experience.
If you prefer to use another wallet, network, or authentication method, you can select
Custom Setup. The CLI tool currently supports major chains such as Ethereum, Solana, and Flow. For additional blockchain support, you can get started with our CodeSandbox demo and add the relevant blockchain extension.
After finishing your initial configuration, you'll be prompted to enter your Magic Publishable API Key. You can find this in your Magic Dashboard.
You can also leave this empty for now and add it to the project's
.env file later.
At this point,
make-magic will create a new directory named after your project, download the code, install dependencies, and start running automatically on port 3000 (if it's not already in use).
Next.js has built-in support for hot reloading, so most front-end code changes are applied instantly during development without the need for a server restart. You can update the UI, swap out the RPC URL in the
.env file, and more, all without a restart. If you do need to restart the server, you can terminate the console process and execute
npm run dev.
If you provided your Publishable API Key during the interactive prompts, you'll be able to log in and send a transaction right away! Otherwise, your project will show a landing page directing you to find and add your API Key as an environment variable.
The login options available depend on your project's configuration. The
Quickstart option defaults to Email OTP. See the Dedicated Wallet's documentation for the full list of available authentication options.
Once logged in, the Quickstart app shows a dashboard with three cards:
- Wallet - shows the network you're connected to, your address, and your token balance
- Send Transaction - lets you send native tokens to another address
- User Methods - shows and lets you test the various user methods available to you
If you're on a test network, the Send Transaction card will have a button to get test tokens. Once you have test tokens, you can add a receiving address, an amount of tokens to send, and click Send Transaction to send tokens with your Magic wallet.
Congratulations! You've successfully bootstrapped a full application and sent your first transaction.
To customize the app, feel free to modify any of the code and restructure the project. Magic-related components can be found in the
src/components/magic/ directory. For example, the
MagicProvider.tsx gives your app global state access to the
Magic instance across multiple pages and components using the
useMagic hook. You can also swap out the RPC URL in the
.env file, or update any of the styling in
This application uses our Dedicated Wallet. The Dedicated Wallet meets the widest variety of needs while still being incredibly simple to implement. In addition to the baked in Login UI, it has plenty of customization options, supports social login through providers like Github and Discord, allows for enterprise multi-factor authentication, and more.
We have a suite of resources to help developers and companies with a wide variety of use cases. Below are some ideas to get you started, but feel free to browse our documentation or reach out with specific questions.
- Add support for OAuth social providers like Google, Github, and Discord
- Add support for one or more of the 20+ blockchains accessible through Magic
- Use Magic across a variety of platforms, including Web, iOS, Android, Unity, and more
- Learn more about Magic's security framework and how it can makes your applications more secure
- Read Magic's Whitepaper