>This article is a guest post by [**Mohamad Shahbaz Allam**](https://twitter.com/mdsbzalam), Developer Advocate at Magic as part of our partner ecosystem. This tutorial will teach you how to use Strapi as a backend to our [Nuxt.js](https://strapi.io/integrations/nuxtjs-cms) to-do application, where Magic secures everything. Strapi is the leading open-source headless CMS. It's 100% Javascript, fully customizable, and developer-first. It gives developers the power to easily create self-hosted, customizable, and performant content REST/GraphQL APIs. Nuxt.js is a higher-level framework based on [Vue.js](https://strapi.io/integrations/vuejs-cms) to create production-ready modern web applications. Nuxt is inspired by [Next.js](https://strapi.io/integrations/nextjs-cms), a framework of similar purpose based on [React.js](https://strapi.io/integrations/react-cms), our to-do application's frontend will be built in Nuxt, which would use Strapi APIs to manage the to-dos. Magic empowers developers with tools that make passwordless auth simple, with the best user experience and long-term security built-in. With a few lines of code, no bloat, and zero unnecessary configs, your app can support various passwordless login methods. We will be using Magic's email passwordless to login a user and receive a token. We will later pass on that received token to Strapi in our authorization header when making API calls to get our protected resources. There's much to learn in this tutorial, but don't worry, we will go one step at a time. But before we get started, below is the outline for this article: ### Prerequisites ### Setting up a Strapi Backend #### 1- Initializing a Strapi application #### 2- Creating Collections #### 3- Add Magic to Strapi Get your Magic API Keys Extend default permission policy Edit the Authenticated Role Test with Postman ### Setting up Nuxt.js Frontend #### 1- Initializing a Nuxt.js Project Create a secured Nuxt.js application with Magic #### 2- Add Nuxt Todo backed by Strapi Update store Add components to show our Todo layout. ### Run Application #### 1- Backend #### 2- Frontend #### 3- Source Code ### Done I can't wait to see your reactions and feedback at the end of this tutorial, but first, let's see the prerequisites and prepare ourselves for fun learning.

Prerequisites =============

- [Node.js](https://nodejs.org/) - [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) - [Strapi](https://strapi.io/) - [Nuxt.js](https://nuxtjs.org/) - [Magic](https://magic.link/) - [VS Code](https://code.visualstudio.com/download) or any code editor you love

Setting up a Strapi Backend ===========================

Initializing a Strapi application ---------------------------------

Let's start by scaffolding your strapi backend. Open your terminal and type. ```bash yarn create strapi-app strapi-todo-api --quickstart //using yarn npx create-strapi-app strapi-todo-api --quickstart //using npx ``` Your package manager will create a `strapi-todo-api` directory and install Strapi in it. If everything went smoothly, the strapi server would be started at `[localhost:1337](http://localhost:1337/)`, and a browser window would open at `localhost:1337/admin` to set up your admin account. Fill in your details, then click on the "LET'S START" button. ![](https://lh4.googleusercontent.com/KsAYx3gdSGBkAFaEa3a_Mk2gulwA2D3_RO-iCbAPHQjhFRY39CFw7iQji5RjE02NChXlqZ1TAqf8x0P1O6JLBXZpPRnI7dOZhdH9azvEFHepXTgAxvnpTxPgFiy6APSS5kXBFq5a) You will see the Strapi Dashboard, similar to this. ![](https://lh6.googleusercontent.com/Rd4PPDXQmvOjYpNXjEPhjT8nWDnUlKSkk2QOUNsVcTjAROgDmKnyonOPqeR8kv6FJzC9HUNLIWiEan_t483zMvYPfoAAA9zQDy3SumFTc8LI_WpWnpsBXn1WQgRe57gYqnI5Qr6A)

Creating Collections --------------------

Go to `Content-Types Builder` and click on the `Create new collection` type. ![](https://lh3.googleusercontent.com/u25xsIa7dbmb9_ZgAsIDeofSBU22tSu3tXJOH1svm6HEPIo0GHvcOTNsUYNTSyWIhEHDZn8chNlIwLqneO_cJTeiMb_ltqYa04rnhyoiMNhXu7obzhaT1m1X9_9bxNY6RxyP6CJn) A modal window will appear, enter `todo` under the Display name input box, and click Continue. ![](https://lh6.googleusercontent.com/0DnIZGTB_p1Z3nZyAb4rEG1gBFnNZ1P1oXYa9p7nMWkFe5nBou_D6Iv9oj61CPSozsSYL_xDw2hLZh4eZOA-e7XMXCGB3YQ_b31eaD1N37FIEDgGKSBLXtGD85qqGeMiGMZKXDuc) A modal will appear. Select `Text` as the field for your collection type. ![](https://lh4.googleusercontent.com/097_6Wo4VtvNyhJw-epaCMOtCM7XtKokqzKADb9UPEHUiivOS0Q7dO0M5liZ65oUaXUTCUTzLuZGU0UAHvA2YpEZJN5yza3qbMCoG7wfLlbG7b6S4eFKBGrrM24eGlfjxU9TlLnC) To enter the name of the field, type `todoTitle`, select `Long Text` for Type, then click on `+Add another field`. ![](https://lh4.googleusercontent.com/vpe-zqjmhlyZp17bCdLVqqeI8Vh9ATQldfhzP3aEulSfYVL3rSAVHyymZrVSyvHIN1PAQat-UYrw9TF8epw6J0dV1HzD_fGzqPczRNkkJL6OexdLKDaxGdnzCwZxsVbEVmqY8xE8) From the pop-up modal window, select `Boolean`, enter `completed` in the `Name` field, and click `Finish`. ![](https://lh3.googleusercontent.com/Q8i0D-Ec4RbpNqamc0VWCfyGjzns8WdeU7AQUNcyEldlnVllO5evIGDECMdf2yCNzA9rBX-dpQxenu3qrg4_b9Tk9FpqD9ryYfhnxDYBhkofbV8qr-vNr8pJCX5CKFO3qxK6NwaH) Our `todo` content type would look like this by now, click on `Save` to make the changes into effect. ![](https://lh3.googleusercontent.com/bubLttt0DSdK8Ztb4jkPtPvhxlc5hLprokH_MJLjjOviEfRaOiKpc6SVNel4TQxRYzj6ceqggl05J4Ad-XX1j0i_ZTx3CzUpZwbp5Ju_OfNr-EGijDF9okY9U3SQdUfVuDZ51whz) That's it for our Backend, we have a `todoTitle` for our To-do's and `completed` for the status of our To-do's. Let's go ahead and fill some To-do by clicking `+ Add New Todos` ![](https://lh5.googleusercontent.com/gwXYCfTpopgIR-QMg6Aw2YMJlf5Nip9NtAw5xGSCp8kkR7DZTre1Dc9J1J0BVeDBJvSJesPe9q4qsAwrkEniohXrn1fZo7sLDcsYehUIR3Fd71F0bNcKQLuJzElhxm8FhI1ZXPHZ) ![](https://lh5.googleusercontent.com/1AQO5CN_B-zHrzFfJeOiLSplqjRppDDaVmBlQgNB-iZSYZIP7EYfIniZeblekPjTJxNCGN_vOj2AldMBY8N24cPaw9JswPJTosXfOlTYazZbUx9ODcVvPcM2e03_7RtifGsFhi5o) Fill in TodoTitle and Select Completed to `OFF` meaning, it's not completed. Then, click on `Publish`. At this point, our Strapi backend is ready, and we can test it with Postman. But in Strapi, every resource at first is set to private, which will result in 403 Forbidden status. So, to see the newly created To-do's, we have to change the Roles and allow Permissions to Public roles, which is not what we want in this application because we want the To-do to be displayed to an authenticated user. So, let's add Magic to our Strapi backend, after which we will be able to see the To-do's we created.

Add Magic to Strapi -------------------

Install `strapi-plugin-magic` by running the following command inside your strapi-todo-api directory (strapi project's root) and then rebuild your application. Install the Plugin ```bash\ // ~/strapi-todo-api yarn add strapi-plugin-magic //using yarn npm i strapi-plugin-magic //using npm ``` Rebuild your Strapi Admin ```bash yarn build //using yarn npm run build //using npm ``` Once the rebuild is done, you will see 🪄 Magic on the side-bar menu under `PLUGINS`, click on it. ![](https://lh3.googleusercontent.com/bM1MGyovfWY56FTGURrmQCumVhlUNbVoESfhye9b2CL58eAro-ud6-scw_pQfNQWjQ-_-dXmGetZCeMyD5IS0i2LB5MHj2pcF1sRmhf5g6nWe2mQXiYqzDchfgWRfll2vme-rfAv) Here, you need to insert `SECRET_KEY` from the [Magic Dashboard](https://dashboard.magic.link/).

### Get your Magic API Keys

When you sign up for [Magic](https://magic.link/), which is free for developers, a new application is created for you, named 'First App', or you can create a new one from the [Dashboard](https://dashboard.magic.link/). You will need the following information: 1.PUBLISHABLE_KEY 2.SECRET_KEY ![](https://lh3.googleusercontent.com/v8zgTGywpgjxu-1nuAR3NZ0bdCwpZ_PYOVEV88AlEv8vZwn_IZVibnhYlGMLcHWI2cm7aDkI5D7bE0OZjsVKxHVt9vkGgdE7q-aXmsL-HlfA9cXlGZDWu9uwbpxMtvpQrMAD_zgl) Copy the `SECRET KEY` from the dashboard and paste in the Strapi Magic input field and click `Submit`. ![](https://lh4.googleusercontent.com/6LU9W5RbqLq_HPO8acn5UjprU_3lXm4zqqROEWJ7VQO-H_vMOs5mNfBe5HH0ikZc-IeAR2_x_EbvFR-Fq1uGggdx5dznyxvRi0gri-UB_IH8D8LOlGCQ8gYT1P5ILGT-BRbY54R6)![](https://lh6.googleusercontent.com/elQ_8W0OtFU0HJm76Q7g-RldtXYX1TlMingT66YJYystRugBDmBqAnFCjV_lYibkttdpABOS9fxgp5GpgPTx9FNdvJZBC7Ful9_Eb1jaoarCYKOe2ZcGzSvs6Z8j9xMShFv-nhGo)

### Extend default permission policy

Let's override default permission so that Magic can generate and manage the user for you. Create a file /extensions/users-permissions/config/policies/permissions.js ![](https://lh4.googleusercontent.com/AHxdv_MexuV-aP_d0B4asBFdMYVGR8V94gf2JyjzrRrXe6y9OjBwy-j31TalOGNlpRCLuCxb2KZF_ZpbRs2BtMkbEs6t5uPo61eKXMoUb3QfyuW8xe72CvWpgNrrqBsaRJbm75Q4) Copy the "normal version" from [here](https://raw.githubusercontent.com/strapi/strapi/master/packages/strapi-plugin-users-permissions/config/policies/permissions.js) This file allows you to customize the way the user gets logged in. You will need to replace line 26 with the following code to log in the user using a magic token: Replace line 26 with the following: ```javascript /** With Magic Changes */ try{ await strapi.plugins['magic'].services['magic'].loginWithMagic(ctx) } catch (err) { return handleErrors(ctx, err, 'unauthorized'); } /** END With Magic Changes */\ ``` Or simply copy and paste the below full code from here: ```javascript "use strict"; const _ = require("lodash"); module.exports = async (ctx, next) => { let role; if (ctx.state.user) { // request is already authenticated in a different way return next(); } if (ctx.request && ctx.request.header && ctx.request.header.authorization) { try { const { id } = await strapi.plugins[ "users-permissions" ].services.jwt.getToken(ctx); if (id === undefined) { throw new Error("Invalid token: Token did not contain required fields"); } // fetch authenticated user ctx.state.user = await strapi.plugins[ "users-permissions" ].services.user.fetchAuthenticatedUser(id); } catch (err) { /** With Magic Changes */ try { await strapi.plugins["magic"].services["magic"].loginWithMagic(ctx); } catch (err) { return handleErrors(ctx, err, "unauthorized"); } /** END With Magic Changes */ } if (!ctx.state.user) { return handleErrors(ctx, "User Not Found", "unauthorized"); } role = ctx.state.user.role; if (role.type === "root") { return await next(); } const store = await strapi.store({ environment: "", type: "plugin", name: "users-permissions", }); if ( _.get(await store.get({ key: "advanced" }), "email_confirmation") && !ctx.state.user.confirmed ) { return handleErrors( ctx, "Your account email is not confirmed.", "unauthorized" ); } if (ctx.state.user.blocked) { return handleErrors( ctx, "Your account has been blocked by the administrator.", "unauthorized" ); } } // Retrieve `public` role. if (!role) { role = await strapi .query("role", "users-permissions") .findOne({ type: "public" }, []); } const route = ctx.request.route; const permission = await strapi .query("permission", "users-permissions") .findOne( { role: role.id, type: route.plugin || "application", controller: route.controller, action: route.action, enabled: true, }, [] ); if (!permission) { return handleErrors(ctx, undefined, "forbidden"); } // Execute the policies. if (permission.policy) { return await strapi.plugins["users-permissions"].config.policies[ permission.policy ](ctx, next); } // Execute the action. await next(); }; const handleErrors = (ctx, err = undefined, type) => { throw strapi.errors[type](err); };\ ```

### Edit the Authenticated Role

Let's come back to the Strapi dashboard and click on Settings > Roles > Authenticated. Under permissions, click on `APPLICATION`, then click on the `select all` checkbox. ![](https://lh5.googleusercontent.com/_Hjr1z8ouP4gcZ6T5yEf4NTAwv-IETujJ6WEqvpdi_axSuZ9arVAMJII_jcimcos5lvBSKxj8UCsfu_qza8_HLt2S34h28bUP0rZo2jHUK6_vsCkTHTocb3X7ZNok3C2s5mMQHTk) Finally, Click on `Save`. Now our Strapi Backend is secured with Magic.

### Test with Postman

GET localhost:1337/todos will return 403 Forbidden Status, as our backend is protected with Magic, and it requires a [DID Token](https://docs.magic.link/decentralized-id#what-is-a-did-token) in the Authorization Header. ![](https://lh5.googleusercontent.com/AhuPGysqUU7VhOVq6Tbg6VqEQh4zW0e0CbBM6Az0NeEpGeqSHcCMD0gr3sYlxbbldPsbvIhUR3UaaPHqRN_gBemvO69Xh-NhNnepvZm4ApAqBXCcJbV8R_UGxj7urZH6Puw4QlKU) What is a DID Token?\ Decentralized ID (DID) tokens are used as cryptographically-generated proofs used to manage user access to the application's resource server. The DID token created by the Magic client-side SDK leverages the Ethereum blockchain and elliptic curve cryptography to generate verifiable proofs of identity and authorization. These proofs are encoded in a lightweight, digital signature that can be shared between client and server to manage permissions; protect routes and resources, or authenticate users. To learn more, visit [magic docs](https://docs.magic.link/decentralized-id). With an Authorization Header and selecting Bearer Token from dropdown, let's try again and type `AnythingJustToFoolTheSystem` inside the Token field.\ You will get a `401 Unauthorized` status with an "Invalid Token" message. ![](https://lh4.googleusercontent.com/qoVMOT84xYsy1_9oeT39J9RMf1jyWMIzrkENRm9GCCL13XaibP3_DxYI0MJW9NR_J_najLfMzeW6we18chaIDrQbd1bR4g6pkJ1eWbF-2a3YNRY9lXH8YtqorfsUO1okp9X_esLG) Now, the question is, how to get a DID Token? We will get that from the frontend application, which we are going to build in Nuxt.js.\ Our frontend application will use Magic Client SDK to authenticate a user and then get the DID Token from Magic, which we will trade with Strapi to access our resources. But for now, I have fast-forwarded to show you how after getting a DID Token, we can call the endpoint with a valid DID Token, which returns `200 OK` as status and the list of To-dos with all its fields. ![](https://lh6.googleusercontent.com/rPDa9NNdE-fZhNFDKalXFK3hdZIRQcf1P0oGAPtYEU5XcoLGbTH4yoYuv8kVvQsT8SwoxmO3Z16vWNoeMmoegQPvmNCr7yM53okIgMlCPJYgR3dIWZYQeIInujZUD2-liHeD9eKb) First part of the tutorial is done. Let's move on to create the frontend in Nuxt.js and use Magic.

Setting up Nuxt.js Frontend ===========================

Our finished frontend application will look something like this:![](https://lh6.googleusercontent.com/iSCSpPJfzwY7O-USxZ9bsQXTeuWQNxO7fiOzc_4azlJphwMag9jnF_KQ9OOs9sSVyV8Ah-GHlEmuhPz2T1YzvMOKYlWtEyl4xvzPVfcTkg_DMfTIFu1FVa2wz6f-Ov-WrTk3Htzn)

Initializing a Nuxt.js Project ------------------------------

We will be using the `npx make-magic` CLI tool developed by Magic to get you started with the Magic-powered Nuxt application.

### Create a secured Nuxt.js application with Magic

Open a new terminal window and type the following: ```bash npx make-magic --template nuxt ``` 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. ![](https://lh4.googleusercontent.com/PO_t0oKLxOTbQWDGCBlxjrtWsvQloefESFSW_bkyDq7ShQ0Ze_7gSUD36i8fON6EThOd1jBONT0xP-3O9LBT2CK7ppfqSVQ0glhfhlhvnPh6CwXnyB98ZY96D4rJZXua6HQWLxR8) After putting in a project name, you will be prompted for your `Magic Publishable API Key`, enabling user authentication with [Magic]([https://magic.link](https://magic.link/)). ![](https://lh6.googleusercontent.com/bBNLVsA-afwVkIqTqDVhUBtSb7-_H-bJoTwjvzKmfnCstBG21lEWUEPE6qnXf7tRj84Wi10QtkQZIq5atyFWaDwnn61hb5kS-g6Ogd0PGtRRCZjZHlGchUeFRiKcw3sl2LPYk1D5) 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). ![](https://lh6.googleusercontent.com/Bt4Zym7oyjcmh1EnwqZ8PP9UqRp_C0PQkXnfLuwrxqFAbb6r_nbtU_GaAViAe4V0qMEvBxul2rVswxA3HckJRzGeQAIah3l36EDAEILWTBCUr21YP1wPfOwc1emEdvl6wKmD3buH) You'll now be able to see your **Publishable API Key** - copy and paste the key into your CLI prompt. ![](https://lh6.googleusercontent.com/rwvMm3910sD93KkmL7A2_SiII7kCVXrKx5qYUBou1cocgMoyB5LU7FOBuHmX7hwHHH3gpcLGVn-jCZ2Qj0zVPMW2zfsP5ggUTL3CRymKiSUuXp23ZMdvJ2_--S2diPQlnOMZgE1L) After hitting Enter, you'll be asked to select whether you'd like to use npm / yarn as the NPM client for your project. ![](https://lh4.googleusercontent.com/0Pq_9khz5WAXegW-4jkbnMh5dkJIr6coCTR_B4ONY4BDNfBtpwfYxY9YYp3aOY_AOWzItMF1yLEBs_EaXcqSax8NpsFo-797qaCZdM6ZWNy0C3d4Qytah48ZPCDlQnnqnsxEucP1) After selecting your NPM client, the nuxt server will automatically start, and your application will be running on [http://localhost:3000](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. Magic secures the authentication process. ![](https://lh3.googleusercontent.com/mWH6knUAKaI5Xm_ZW8yJsInlmufcBz9wqcFbc6y3YVZP3p48kL0iut13jjZL8J1Xc76Xt-TZ5VBSp6HqLnO8OwrqnXWN8_VHxB5ulWcrsgx8vnB3O0tTA-jNuiQ9hLiKiDFjMMUq) 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. ![](https://lh6.googleusercontent.com/eEIhMbvOIRuzwIqh0fLeCb8bViMMQsr7fDkUiPchfK91pKU3Q9ZvRuvEyYTEQHHt1-5Ozv5BrwxTZeHElVLVFD0RWEQ1ax5xCeAyhMMWzHHspAGBK0GOFj0DFHatL2z5VvA27v8K) We have our Nuxt application secured by Magic. Let's build our Todo application on top of this application and add Strapi support to store, update, delete our Todos.

Add Nuxt Todo backed by Strapi ------------------------------

First, we will add `DID Token` support to our frontend, which will authorize our requests at Strapi endpoints.

### Update store

Open `~/store/index.js` file and replace it with the following code: ```javascript import { magic } from '../plugins/magic' export const state = () => ({ user: null, didToken: null, authenticated: false, }) export const mutations = { SET_USER_DATA(state, data) { state.user = data.userData state.didToken = data.didToken state.authenticated = true }, CLEAR_USER_DATA(state) { state.user = null state.didToken = null state.authenticated = false this.$router.push('/login') }, } export const actions = { async login({ commit }, email) { await magic.auth.loginWithMagicLink(email) const userData = await magic.user.getMetadata() const didToken = await magic.user.getIdToken({ lifespan: 7200 }) const data = { userData, didToken } // didToken is valid for 7200 seconds, i.e 2 hours // Read more https://docs.magic.link/client-sdk/web/api-reference#getidtoken commit('SET_USER_DATA', data) }, async logout({ commit }) { await magic.user.logout() commit('CLEAR_USER_DATA') }, } ``` Here we have added `didToken: null` to state, updated mutations to reflect the `didToken` state. Also, updated login action to use didToken using Magic's `getIdToken`. `const didToken = await magic.user.getIdToken({ lifespan: 3600 })`

### Add components to show our Todo layout.

Create a `ToDoList.vue` file inside the **components** directory and fill it with the following code: ```javascript ``` The ToDoList component is to list all the Todos. Now, Let's create a `ToDoListItem.vue` file inside the **components** directory and fill it with the following code: ```javascript ``` ToDoListItem is to display individual todo. At last for our Todo Layout, we need to update our `index.vue` page. Open the `~/pages/index.vue` file and replace it with the following code: ```javascript ```\ Here, we have added the `ToDoList` component and used `asyncData()` to fetch the todos. We have also used DID Token in our Authorization header to authorize our API request. Let's add loading page support to our frontend, which will give a nice animation each time we update, create or delete a todo. But before that, let's install `epic-spinners` to our nuxt project. ```bash // ~/hello-nuxt npm i epic-spinners // npm yarn add epic-spinners // yarn ``` Now, create a `loading.vue` file inside the `~/pages` directory and fill it with the following code: ```javascript ``` Your application would be live on [http://localhost:3000](http://localhost:3000/) displaying the list of todos. Play around and add your todos. Note: If no todos are shown, try running your backend and frontend again.

Run Application ===============

Backend -------

Start the Strapi Backend server, if not already running. ```bash // ~/strapi-todo-api yarn develop //using yarn // OR npm run develop //using npm ``` Strapi server will be running on [http://localhost:1337](http://localhost:1337/)

Frontend --------

Start the Nuxt Frontend Application. ```bash // ~/hello-nuxt yarn dev //using yarn // OR npm run dev //using npm ``` You should have your Nuxt application running on [https://localhost:3000](https://localhost:3000/), displaying the list of todos. Try updating, creating, or deleting a to-do. ![](https://lh6.googleusercontent.com/iSCSpPJfzwY7O-USxZ9bsQXTeuWQNxO7fiOzc_4azlJphwMag9jnF_KQ9OOs9sSVyV8Ah-GHlEmuhPz2T1YzvMOKYlWtEyl4xvzPVfcTkg_DMfTIFu1FVa2wz6f-Ov-WrTk3Htzn)

Source Code -----------

[Frontend code](https://github.com/shahbaz17/magic-strapi-nuxt-todo) [Backend code](https://github.com/shahbaz17/magic-strapi-todo-api)

Done ====

Congratulations!!!🎉 You have successfully built a Nuxt.js todo App using Strapi as a backend, and Magic secures everything. I hope this tutorial has given you an insight into how to use Strapi, Nuxt, and Magic. There are endless possibilities to add more functionalities to this application. Feel free to make a PR on both of the repo listed above. If you have any questions, feedback, or suggestions, please comment here and reach out to me on [Twitter](https://twitter.com/mdsbzalam) or open a GitHub issue to any one of the above repositories. Cheers!