#Digital Gold Meets Decentralized Auth

Bitcoin is a new way of creating, holding, and sending digital money. It has the potential to change the world because instead of banks and governments having control of the money / Bitcoin cryptocurrency, it is the people who own this power. Thanks to its core technology being a decentralized, peer-to-peer network, Bitcoin could be owned by everyone and spent anywhere. Because Bitcoin has a supply cap of 21 million, it can also be considered the digital version of gold.

Magic is focused on building future-proof authentication by first paving the path towards a passwordless future with a plug and play auth SDK, and then by enabling self-sovereign digital identities with decentralized authentication. With Magic, both web2 and web3 developers can onboard users using only their emails. When the user signs in, Magic generates a public and private key pair to represent their digital identity.

With Magic, developers can connect to the Bitcoin blockchain by simply specifying the network URL when initiating a Magic instance. This guide will cover the key parts needed to create a simple app that allows users to send Bitcoin transactions.

#Getting Started

Let's clone the official repo of the sample app we'll be following throughout this guide.

git clone magiclabs/example-bitcoin

#Configure

First, let's understand the libraries we've imported into our App.js file.

• The Magic SDK helps us enable passwordless authentication: import { Magic } from "magic-sdk";
• Magic’s Bitcoin Extension helps us interact with the Bitcoin network: import { BitcoinExtension } from "@magic-ext/bitcoin";
• BitcoinJS helps us code with Bitcoin in JavaScript: import * as bitcoin from 'bitcoinjs-lib'

#Initialize

Now, initialize the Magic SDK with your app's Publishable API Key and pass in your network config.

01import { Magic } from 'magic-sdk';

02import { BitcoinExtension } from "@magic-ext/bitcoin";

03

04const magic = new Magic('YOUR_API_KEY', {

05  extensions: [

06    new BitcoinExtension({

07      rpcUrl: 'BTC_RPC_NODE_URL', // Node provider service you’re using

08      network: 'testnet' // Magic creates a testnet or mainnet API keys for you

09    }),

10  ],

11});

#Core Functions

Here are the core functions we'll need to create an experience where the user can log into the app, send BTC, and log out.

#login()

The login() function logs users into the app using their email address.

01const login = async () => {

02    await magic.auth.loginWithMagicLink({ email });

03    setIsLoggedIn(true);

04};

#logout()

The logout() function logs out the currently authenticated Magic user.

01const logout = async () => {

02    await magic.user.logout();

03    setIsLoggedIn(false);

04};

#handleSignTransaction()

Once the authenticated user has shared their input transaction hash (a reference to an output from a previous transaction), and has specified the amount of BTC they want to send, as well as to whom they would like to send it to, they can then sign the transaction with the Magic's handleSignTransaction() function.

01const handleSignTransaction = async () => {

02    // Magic supports testnet or mainnet network

03    const TESTNET = bitcoin.networks.testnet;

04    setSendingTransaction(true);

05

06    // If TransactionBuilder's parameter is empty, default network is mainnet

07    const tx = new bitcoin.TransactionBuilder(TESTNET);

08    // You'll need to grab the input hash & put it into the transaction

09    tx.addInput(inputTxHash, 0);

10

11    // Who to send BTC to and how much

12    tx.addOutput(destinationAddress, sendAmount);

13

14    const txHex = tx.buildIncomplete().toHex();

15

16    // Sign transaction with user's Magic Secret Key

17    const signedTransactionHex = await magic.bitcoin.signTransaction(txHex, 0);

18

19    setSendingTransaction(false);

20

21    setTxHash(signedTransactionHex);

22

23    console.log("signed transaction", signedTransactionHex);

24    

25    // Add more logic to send transaction to Bitcoin blockchain

26};

#Ready to give Magic a try?

Now users are able to log in with a familiar web2 experience and sign a Bitcoin transaction! Easy, huh? Here's the sample app, and a link to the docs.

As of now, Magic only supports the basic send-and-receive type of transaction. If you want to see Magic support other types of transactions, feel free to join our community and let us know!