Magic.Link added as provider to @redwoodjs/auth

[BurnedChris]

Hello,

I am currently have added Magic.Link as a provider following there SDK outlined here.

I have not tested it yet as I have an issue #561 finding redwood-tools

[BurnedChris]

The build and lint tests also fail as by the error of error TS2307: Cannot find module 'react-native'. I suspect this is because magic-js is a cross-platform sdk that supports React, React Native and React Native Webview. Any ideas how we would work around this problem?

[BurnedChris]

The crooks of the implementation is done. 🚀

Thank you to @peterp for all the help!

You can follow how i have implemented it into the invoice app here

Main files -
Redwood Provider - here
API - auth.ts - here

Things to note

On the API side i though it was best that in that the magic-admin client was loaded in the developers project instead of inside of redwood, how does that effect everything?
AuthHeader.ts

case 'magicLinks': {
      decoded = token
      break
    }

the token is just handed back to the client to decode inside of Auth.lib As seen Below

import { db } from 'src/lib/db'
import { AuthenticationError } from '@redwoodjs/api'
import { Magic } from '@magic-sdk/admin'

const mAdmin = new Magic(process.env.MAGICLINK_SECRET)

export const getCurrentUser = async (authToken) => {
  const { email, publicAddress } = await mAdmin.users.getMetadataByToken(
    authToken
  )

  if (!email || !publicAddress) {
    throw new AuthenticationError('Uh, oh')
  }

  let user = await db.user.findOne({ where: { email } })
  if (!user) {
    user = await db.user.create({ data: { email, publicAddress } })
  }
  return user
}

Current Problems

• currentUser returns instead of {issuer, email, publicAddress} sdk
• Create Documentation on how to add magiclinks into your rw project
• Add correct Types in AuthClient

[peterp]

Wooh! This is cool, and I think the way that you've done it makes a lot of sense. We don't really want to bundle esoteric decoding libraries with @redwoodjs/api

[peterp]

This is looking great. I would love to have the type definitions working, but otherwise I think this can be merged!

I made a suggestion about the name of the provider.

[BurnedChris]

I agree with the name change, will work on the other bits tonight i have opened a comment on magics SDK asking for advice with the typing.

[smithki]

Hey, just wanted to mention that I think we've solved your problem in magic-sdk@1.3.4.

You should be able to type the instance just as you would expect now:

import { Magic } from 'magic-sdk';

let foo: Magic; // foo will equal `InstanceType<typeof Magic>`
foo = new Magic(...); // ✨ works!

Please let me know if other blockers arise!

[peterp]

@smithki AMAZING! Thank you!

[BurnedChris]

Causes one error on the logout.

[BurnedChris]

@smithki it looks like everything is typed correctly. But it looks like we are still having the build errors coming from react-native types inside of react-native-webview.

##[error]../../node_modules/react-native-webview/lib/WebViewTypes.d.ts(2,140): error TS2307: Cannot find module 'react-native'.

[smithki]

I'll pull your branch locally and see if I can figure out why. This is the first I've seen such an issue 🤔

[smithki]

@burnsy -- I think I've solved the issue in magic-sdk@1.3.5. Please let me know if the issue persists. Happy to take another look.

Here's more context around what the issue boils down to:

We support web and React Native environments, but we have no way of signalling to TypeScript that we don't want RN typings to pollute the web bundle. It's very difficult to separate the definitions without resorting to hacks. Honestly it's sort of mind-boggling that it's not a baked-in feature of TypeScript, but at least there's a relevant issue open: microsoft/TypeScript#18588

[BurnedChris]

I believe thats everything! I have wrote some documentation on how to integrate it.
It may need tweaking around the API Specific Integration as i changed the not about auth0 into a section with magic link under it so it flows a bit better than two notes.

Thanks for all your help @peterp and @smithki 🎉

[peterp]

Thanks for this @burnsy, you legend! Did you get some stickers?

[BurnedChris]

@peterp Yes, I would love to see something similar to Gatsby! Redwood definitely needs a small e-commerce store. I would love to get a redwood T-shirt or something!