Note: This repo is a copy of the the strapi-plugin-magic package from Alex The Entreprenerd, 'forked' since his repo was only available via his strapi template.

Magic Plugin Integration for Strapi.

Use Magic.Links for your Strapi Users!

✨ Allows you to store your Magic Secret Key

✨ 1 Line integration

✨ Allow authenticated API request with a bearer token issue by Magic.

https://youtu.be/dcRupfuPa1U

npm i strapi-plugin-magic

npm i strapi-plugin-magic

npm run build

### Inject SK through .env

Create a .env file and add your PK with key MAGIC_KEY

MAGIC_KEY=sk_123

See .env.example in template

Just open /admin and click on Magic, then paste your SK

Create the file /extensions/users-permissions/config/policies/permissions.js

Copy the "normal version", then edit the handling of the catch on line 26: https://github.com/strapi/strapi/blob/master/packages/strapi-plugin-users-permissions/config/policies/permissions.js

The file looks like this

'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) {
      return handleErrors(ctx, err, 'unauthorized'); //EDIT HERE
    }

Replace line 26 with the following

    /** With Magic Changes */
    try{
        await strapi.plugins['magic'].services['magic'].loginWithMagic(ctx)
    } catch (err) {
        return handleErrors(ctx, err, 'unauthorized');
    }
    /** END With Magic Changes */

https://github.com/GalloDaSballo/strapi-magic-template/blob/main/extensions/users-permissions/config/policies/permissions.js

You can test the integration by retrieving a Magic ID Token

//By logging in
const token = await m.auth.loginWithMagicLink({ email: '[email protected]' });

//By requesting the token, works if you are already logged in
const token = await m.user.getIdToken();

Then make a request

fetch(`${STRAPI_URL}/articles`, { 
   method: 'post', 
   headers: new Headers({
     'Authorization': 'Bearer `${token}`, 
   }), 
   body: JSON.stringify({title: "He turned himself into a pickle"})
 });

https://github.com/GalloDaSballo/strapi-magic-demo

await strapi.plugins['magic'].services['magic'].loginWithMagic(ctx) is a new function that will create or find a user with the corresponding email (or publicAddress) if used. This works because, for Strapi, the user is logged in as long as ctx.state.user is defined.

Read the docs here: https://strapi.io/documentation/v3.x/guides/jwt-validation.html#customize-the-jwt-validation-function

You can test the integration by retrieving a Magic ID Token

//By logging in
const token = await m.auth.loginWithMagicLink({ email: '[email protected]' });

//By requesting the token, works if you are already logged in
const token = await m.user.getIdToken();

Then make a request

fetch(`${STRAPI_URL}/articles`, { 
   method: 'post', 
   headers: new Headers({
     'Authorization': `Bearer ${token}`, 
   }), 
   body: JSON.stringify({title: "He turns himself into a pickle!"})
 });

Magic.Link allows you to create Ethereum (and more) wallets, as soon as the user logs in. If you prefer using their public address for authentication (promoting privacy, recommended for Dapps), you can use useCrypto

await strapi.plugins['magic'].services['magic'].loginWithMagic(ctx, true) //Second parameter, called, useCrypto

When you set useCrypto to true, magic will create and find users by their address rather than by their email

All of the code you use will be the same as this field (email or username) will be consistent.

Read more about this feature here: https://docs.magic.link/decentralized-id

Coming once code is done

Plugin Sponsored by Magic Labs, Inc https://magic.link/

Development By Alex The Entreprenerd https://entreprenerd.xyz

Learn to Code Strapi Plugins: https://www.youtube.com/watch?v=r7EdFVSbZSA&t=1s&ab_channel=AlextheEntreprenerd

Get 1-1 Mentoring and Coaching: https://calendly.com/alex-entreprenerd/15min