---
# System prepended metadata

title: Login Example

---

---
tag: learn
---


# Login Example

Metamask starter template - https://codesandbox.io/s/login-swap-metamask-2eucb8?file=/src/components/connect-wallet.tsx
Magic Connect conversion - https://codesandbox.io/s/login-swap-connect-povqbg?file=/README.md

Here are instructions for exactly how a developer can go from a metamask app to magic connect app (and it's all very simple!)

![](https://i.imgur.com/cryGjkK.png)

And that's it.

I should expand and say that that's the only steps for a very simple app, but there are a few other things that should be considered. Here's the two major ones

With metamask, the user controls which blockchain their wallet is connected to, and the developer reads & responds to that. An example of this would be if you connect your metamask to opensea.io and switch your wallet to a test network, you'll see Opensea shows a banner saying they don't support that network. This is very different than with Magic, where the developer sets the network and the user cannot change it (unless the developer builds a UI to switch networks, but that's a little more advanced. Lmk if you'd like me to expand on this more though).

Metamask emits events that the developer can listen to, such as window.ethereum.on('chainChanged') if the user changes the network in metamask, or window.ethereum.on('accountChanged') if a user changes accounts within metamask. Magic Connect does not support these events, although it is on the roadmap!


---

deploy locally with shell command


```sudo npm install -g serve```

cd into folder

``` serve -s build ```

looking for: what is the URL I want to see on my screen

![](https://i.imgur.com/cHMJVe4.png)

the ending of the local host 

it's missing in the read.me, where are the run instructions


Is this production level? Could it be used elsewhere or only designed for https://codesandbox.io/ ? 