MagicSquared is magic magic link authentication. Try it out:

You can start implementing MagicSquared for your web app right now. You don't even need to make an account - the above login/signup form is just a demo.

MagicSquared requires certain DNS records to work - a subdomain to set httponly cookies and DKIM records to sign emails - so it doesn't work on localhost. Instead use localhostmagicsquared.net - a domain that points to localhost and has those DNS records.

When you use localhostmagicsquared.net you'll see a secure connection error after you verify your email. This is because on localhost you don't have https. In production, when you have https, you won't see such an error.

Frontend

Add the following code to your frontend:

<script type="module" src="https://magicsquared.net/build/magicsquared-stencil.esm.js"></script>
<magic-squared></magic-squared>

Backend

After the user verifies his email, MagicSquared sets a cookie that is a JSON Web Token, a cryptographically signed token containing JSON with the users email address. The name of this cookie is "jwt", short for JSON Web Token.

Most languages have libraries to verify JWTs. To use such a library, you need the algorithm - RS256 - and the public key:

-----BEGIN PUBLIC KEY-----
MIICIjANBgkqhkiG9w0BAQEFAAOCAg8AMIICCgKCAgEAzgxb8Xptl1gkCegRdpd8
cnhkSFSnv5EMSbTHUP3kA9OCoCTesjK3z10KmX6AUYWh6x8KVacMR5cYHqxk5u8Y
51gH/PJV92UhfK4EcikvE1/zx7OsPRxVtf3K+nWZxWRIgDILK5833K/3GmbB77p/
JcGVIRy1RBdSXPtLFdxrEX/S9kCyCg2yTcGIy8MsYC/oGW3abBM714eB7Agxsbug
9TnpUrV0P9V5pl/r5+WrYjUYZRfjMnmUMSxwJyeXOMMPUFRgND5kT5qIMFCB080N
av5OvBWGzgIWX1laGxW6ptIoeJygmPidMfE6SP/B28s4ea/rI6BSBx0mBCNwSWxB
kMc5FCgND+S9B3NKgP2PrJkn7VizV6J8D7mdR0oJBQ633XTcrez4SAhtne6Lb+Re
blQiUGooCh+S6n+mQcY5AUobIXZrTVDaoNrUr9598QeIUoicJIV2GfFVNowtGr8s
wVZj9GkYbt5iNsmBfzUNDXgUSMEMmSr0O/3+O4FWA2WS2Dp01tjQyjV+uzeD0QTx
FuD7Q1cM7EfNP6HanA9pz6iaBDEj2d3Vz3gfNv6dIRyHCVoR3vEHzx2VyjedeBhO
2fah4+MpuFolW8F2jQu+ECqW7/203j/MUyzCtWPxOUs+4ofHrGTtoeocisJ60DwQ
ovmA2TQOXeLyy2BI50M9MfcCAwEAAQ==
-----END PUBLIC KEY-----

Apart from verifiying the JWT cryptographically, you also need to verify the audience (aud) value.

The audience is simply the domain of your app. If you use localhostmagicsquared.net, the audience is localhostmagicsquared.net.

You might have to configure the audience value based on the environment. So in development, the audience value would be localhostmagicsquared.net, in production it would be your production domain.

DNS Records

Add the following DNS records to your domain:

Name Type Value
magicsquared._domainkey TXT p=MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAzwxfrEMMIAD0pbYO1SiyX/8pwX8IRL1/XOD70e5lKn9Cqaakv+dwzvXPlcNoKsrlnAlnR72kB7hVOnMcsqB/sQWhh/ZFdhzCNT7DYu0yl4y5yalfLjHBVf++/bB4Er0rEuUxV7Q4kaGzNaXD2OXD9anzVb402Sj1xTVlgps6mUAs1nasDSr7srPihtXC+eG8ziBJ9auYWItErk" "WygzyBOHw4/rlPtcwhoBEI+l8FiouNzmMqml5DMqfXi5Ez41iEUe9s6O1QqBgJLzXvzanpPeT2sNmUcVuDuqzGN7KEZMrFB7c+yRv3+7V59RMPP1TZC7CT44amATx4muIvs9yqaQIDAQAB
magicsquared CNAME api.magicsquared.net

Test your DNS records by accessing magicsquared.example.com. (Replace example.com with your domain.) It might take a few minutes for the record to propagate. If you get an https error, it's because the https certificate has to be requested first. In that case, just try again.

Pricing

MagicSquared is free. In the future, you'll be able to pay to remove the "powered by MagicSquared" footer.