A Hello World tutorial to quickly get familiar with Magic. 🚀
Let's get started by building a simple interface to let users log in or log out via an email magic link. We've created a template with necessary html and styles on CodeSandBox.
👉 Go to our Hello World template to continue with the tutorial
👉 Or, skip to the completed Hello World template
👉 Or, skip to the completed Hello World template with
👉 Or watch a demo video
0. Sign up for Magic (for API keys)
You need to sign up or log in to the Magic Dashboard to get API keys needed for the tutorial.
1. Install Magic SDK
Install the Magic SDK to the Hello World template with a script tag. You can copy and paste the code snippet below to the CodeSandBox editor after the comment.
👉 Or install Magic SDK with yarn or npm.
2. Initialize Magic Instance
Initialize a Magic instance with a Publishable API Key with the following code. Copy and paste this code snippet below to your editor under the comment.
'YOUR_TEST_PUBLISHABLE_API_KEY' string with your "Test Publishable API Key" from your Magic Dashboard. It looks something like
3. Implement Render Function
To complete the setup, let's write the logic on what the Hello World app should display when (1) users are not logged in, and when (2) users are logged in.
Copy and paste this code snippet to your editor under the comment.
An alternative flow using "redirects"
Certain use-cases can benefit from a "redirect" back to your web application after the user clicks their magic link. This adds a new state that the
render function must handle: (3) log in users who have been redirected to your app's authentication "callback" route.
If you require a redirect, copy and paste this code snippet to your editor under the comment.
4. Implement Login Handler
Now the real fun begins! Check out how you can implement user login with a single line of code, without needing to write any backend code! Copy and paste this code snippet below to your editor under the comment.
Providing the optional redirect URI
If you followed the alternative flow using redirects from step 3, you'll also need to implement your
handleLogin function a little differently. Our call to
magic.auth.loginWithMagicLink will make use of the optional
redirectURI parameter. Copy and paste this code snippet below to your editor under the comment.
5. Implement Logout Handler
To wrap it all up, it's super easy to implement user logout as well. Copy and paste this code snippet below to your editor under the comment.
6. Done 🎉
Congratulations, you've completed the walkthrough! You should have a working version of the Hello World app! Don't worry if things are not working for some reason - you can find the completed working version here.
If you utilized a "redirect" during this tutorial, you can find the completed working version with redirect here.
👉 What's Next
Use Magic with existing tools
Node.js – Now that you have an understanding of how Magic works on the client-side, we strongly recommend you to take a look at an end-to-end, full-stack example to learn about how to connect it to a Node.js backend server and see the full potential of Magic!
Firebase – Magic provides much flexibility and composability to be combined with many other powerful platforms such as Firebase. Learn how to plug Magic into the entire Firebase suite of tools!
Customize your Magic flow 🎨
You can customize the login experience using your own UI instead of Magic's default one and/or customize the magic link email with your brand. Learn how to customize.