DEV Community

Mohammad Shahbaz Alam
Mohammad Shahbaz Alam

Posted on

5 1

NuxtJS - Authentication made easy with Magic

These days adding authentication to an application is very challenging, and you shouldn’t build it from scratch. As the centralized companies on the internet have already failed us in protecting user's privacy and data.

The user trust model of the internet is broken. Let's fix it one step at a time.

Introduction

Hi 👋, in this guide you'll be learning how to add passwordless login to a Nuxt.js application using Magic Link.

Nuxt.js is a higher-level framework based on Vue.js to create production-ready modern web applications. Nuxt is inspired by Next.js, which is a framework of similar purpose, based on React.js.

Create a secured Nuxt.js application with Magic

Let’s start by creating our application using npx make-magic

npx make-magic --template nuxt
Enter fullscreen mode Exit fullscreen mode

After a few seconds, you will be prompted for a project name, this will also be the name of the folder that will be created for this project.

Enter your project name

After putting in a project name, you will be prompted for your Magic Publishable API Key, which enables user authentication with Magic.

Enter Magic Publishable Key

To get your publishable API key, you'll need to sign up to Magic Dashboard. Once you've signed up, an app will be created upon your first login (you'll be able to create new apps later).

Magic Dashboard

You'll now be able to see your Test Publishable API Key - copy and paste the key into your CLI prompt.

Entered Magic Test Publishable API key

After hitting Enter, you'll be asked to select whether you’d like to use npm / yarn as the NPM client for your project.

Select NPM Client

After selecting your NPM client, the nuxt server will automatically start, and your application will be running on http://localhost:3000.

In this example app, you'll be prompted to sign up for a new account using an email address or login into an existing one. The authentication process is secured by Magic.

Login page of the Nuxt.js application

After clicking on your magic link email, you'll be successfully logged in, and redirected to the profile page that displays your email, issuer, and public address.

Profile page of the Nuxt.js application displaying user's info

Read the full guide on https://magic.link/posts/magic-nuxt

Live Demo: https://magic-nuxtjs.vercel.app/

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (3)

Collapse
 
slidenerd profile image
slidenerd

never use third party for your authentication unless its open ID

Collapse
 
shahbaz17 profile image
Mohammad Shahbaz Alam

That's a nice suggestions.

What to share what you think of DID Token? docs.magic.link/decentralized-id

Would love to hear your perspective on DID and DID Token for authentication.

Collapse
 
slidenerd profile image
slidenerd

is that scalable, anything ethereum and the first thing that comes to my mind is how much congestion the network has at peak load, unless i see a few big companies actually shift auth to the ethereum blockchain i dont recommend it

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay