React User Authentication for Self-Sovereign Identity with Magic by Mohammad Shahbaz Alam

React User Authentication for Self-Sovereign Identity with Magic by Mohammad Shahbaz Alam
React Conferences
React Summit Remote Edition 2021
English version
EN
EN
React User Authentication for Self-Sovereign Identity with Magic
ES
Autenticación de usuarios de React para la identidad soberana con Magic
React User Authentication for Self-Sovereign Identity with Magic
Mohammad Shahbaz Alam
Magic Labs
This ad is not shown to multipass and full ticket holders
React Summit 2026
June 11
15
2026
Amsterdam & Online
The biggest React conference worldwide
Upcoming event
React Summit 2026
June 11
15
2026
Amsterdam & Online
Rate this content
Sentry
Promoted
Code breaks, fix it faster
Crashes, slowdowns, regressions in prod. Seer by Sentry unifies traces, replays, errors, profiles to find root causes fast.
Get started
In this talk, we’ll see how to build a user authentication system in react using magic, where magic provides a key-based identity solution built on top of the Decentralized Identity (DID) standard, where users’ identities are self-sovereign leveraging blockchain public-private key pairs. These key pairs are used to generate zero-knowledge proofs to authenticate users instead of having to rely on users providing passwords to Magic or any identity provider.
This
talk
has been presented at
React Summit Remote Edition 2021
, check out the latest edition of this
React Conference
FAQ
The main topic of Muhammad Shahbaz Alam's talk is React user authentication for self-sovereign identity with Magic Labs.
The talk addresses issues such as password reuse, security breaches, loss of user trust, and the centralization of user identity by large corporations.
In zero-knowledge proof, a private key owner does not need to reveal their private key to prove they own it. Instead, they sign a piece of data with their private key and send it as proof to the server.
Advantages of using Magic for user authentication include passwordless UX, improved security and trust, non-custodial key management, and native support for multiple blockchains.
Magic's delegated key management architecture delegates critical encryption and decryption operations to trusted AWS KMS and AWS Cognito, completely bypassing Magic's backend. This ensures that Magic never sees users' private keys, improving security and trust.
A decentralized identity (DID) is a globally unique, resolvable, and cryptographically verifiable identifier that does not depend on any centralized authority.
DID tokens in Magic's authentication system are cryptographically generated proofs used to manage user access to application resources, protected routes, and authenticate users.
To set up Magic in a React application, use the NPX make-magic scaffolding, create a project, obtain a Magic publishable API key, and configure it in your application. Follow the demo link react-summit-magic.vercel.app for more details.
Cons of a key-based authentication model before Magic include the risk of users losing their keys, which would lock them out and potentially result in the loss of their online identity. Additionally, the concept of using a key on the internet is unfamiliar to most mainstream users due to poor UX.
Self-sovereign identity is a lifetime portable digital identity that is fully controlled by the user and does not rely on any centralized authority.
react
Mohammad Shahbaz Alam
18
min
14 May, 2021
Share
Comments
or
to post your comment.
Video Summary and Transcription
Welcome to this talk about React user authentication for self-sovereign identity with Magic Labs. Learn how the user trust model of the internet is broken and a novel solution to fix it. Understand the concept of zero-knowledge proof and the key-based model for user identity. Magic improves trust by leveraging Infrastructure-as-a-Service, secure user keys, and providing passwordless authentication. Explore decentralized identity and how it solves the authentication problem, including the use of decentralized identity tokens (DIDT) for managing permissions and authentication.
Available in
Autenticación de usuarios de React para la identidad soberana con Magic
1. Introduction to React User Authentication
Short description:
Welcome to this talk about React user authentication for self-sovereign identity with Magic Labs. Learn how the user trust model of the internet is broken and a novel solution to fix it. Understand the concept of zero-knowledge proof and the key-based model for user identity.
Hello, welcome to this talk, where I'm going to talk about React user authentication for self-sovereign identity with Magic Labs. I am Muhammad Shahbaz Alam, one of the developer advocates at Magic Labs, and in this talk we will learn how the user trust model of the internet is broken, a novel solution to fix it, and how to achieve self-sovereign identity in React.
We will learn what is DID, DIDT, and also how to build your own. So let's understand how the trust model of the internet is broken. Users think of passwords or secrets specific to them to verify identity and hand them off to apps owned by various companies. 59% of all users reuse their password across applications. Users trust the companies that they will store the secrets securely and responsibly, but many companies don't have proper authentication and prior knowledge of security, leading to security breaches.
Users access the company's services by showing off the secret each time they log in, and every time the secret is shown, there's a risk of exposing it to hackers. Companies might get hacked and lose users' secrets, along with their trust. 48% of customers never come back after a breach. The Equifax breach has cost them at least $4.1 billion. Hackers use stolen secrets to impersonate users to access their vital online services. This problem compounds to the point where the user's identity is no longer in their own hands but controlled by large corporations. Building your own Auth is very expensive. It requires security and infrastructure expertise. It requires security and privacy compliance. Ensure global availability at scale. Keep updated with the latest security trends. Ensure email SMS delivery. Reliability implements internationalization to enable access from a global audience. Also, defend against DDoS and spam attacks. I'm here to present a novel solution to fix all the problems.
In this part, let's understand what is zero-knowledge proof. In Zero-Knowledge Proof, a private key owner does not need to reveal their private key to prove that they own the key. What people tried before magic is a key-based model. Instead of users thinking of secrets themselves, they use blockchain-based public-private key pairs as randomly generated to access apps. It has its pros and cons. The pros where users have complete control of their identity. Companies can no longer see the user's secrets. And user uses the same secret to access apps, which is a cleaner trust model.
2. React User Authentication with Magic Labs
Short description:
The cons of using keys on the internet are the risk of losing them and the unfamiliarity of the concept for mainstream users. Magic improves trust by leveraging Infrastructure-as-a-Service, secure user keys, and providing passwordless authentication. It also ensures non-custodial trust optimization through delegated key management. Magic decentralizes identity, enabling self-sovereign identity. The novel solution recap involves zero knowledge proof, delegated key management, and staying non-custodial. To implement this in a React application, use the NPX make magic scaffolding with the Hello World React template.
The cons is users are likely to lose their keys, which will log them out, as well as lose their online identity, or worse get them stolen. The concept of using a key on the internet is too unfamiliar to most mainstream users, which is mainly because of bad UX.
In zero-knowledge authentication, a user signs a piece of data using its private key and sends it to the server as proof. Server then receives the proof, runs standard stateless cryptographic recovery methods on This means that the user no longer needs to send a secret to the server in order to validate their identity, and server no longer needs to store this class of information. Better login experience.
Let's learn about how Magic improves the trust so far, using a delegated model. Magic leverages large Infrastructure-as-a-Service and secure user keys with hardware security modules, with technology that hides and protects user private key from companies and even Magic. It adds additional pros, which is Magic provides familiar passwordless Auth UX. To use this for them to retrieve their keys, it's a better UX, and users can no longer lose their keys. Magic doesn't store passwords, and can't know user keys or secrets, which enables more trust and security, and it has native support for multiple blockchains.
One con is that it relies on single infrastructure as a service. And in the novel solution series, we have to be non-custodial trust optimization. So Magic's DKM, that is the delegated key management architecture, delegates critical encryption and decryption operation to a trusted AWS KMS and AWS Cognito, completely bypassing the Magic backend. This way Magic stay non-custodial, since Magic never sees user's private keys and therefore a better security and trust with developers and end users. This enables us with self-sovereign identity.
The first obstacle to a more authentic Internet is identity. Identity has been predominantly gated by centralized identity providers. Developers are completely dependent on these providers for user access. Rolling authentication and security from scratch is extremely challenging to keep secure, scalable and reliable, which is leading to the vast amount of user data and credential breaches. Magic solves this by decentralizing identity. Instead of centralized identity provider signing auth tokens, you users are the one signing auth tokens with their, with your own private key, enabling self-sovereign identity.
So let's understand the novel solution recap, which is attaining self-sovereign identity using zero knowledge proof, delegated key management and staying non-custodial. Let's understand how we could achieve this example in React application. So this is a demo link. Anyone in the chat can see how the demo looks, what I'm going to show by visiting react-submit-magic.purrsel.app. We will start by using the NPX make magic scaffolding with a template what we have prepared for you, that is Hello World React. Run that in your terminal. You will be greeted with this. You just need to create a project name and it will ask for a magic publishable API key. You can get your own by visiting magic.link and sign up for free.
3. Using Magic and React
Short description:
Visit the dashboard, create an application, and copy the test publishable key. Paste the key, choose your NPM client, and wait for your application to be ready. Enter your email ID and receive an email from Magic with your application name and a login button. Once logged in, see your user status and a logout button. The Magic CLI scaffolding provides a code structure with components like apps, callback, loading, login, profile, index, and magic.js files. Import the magic SDK, use it in the app.js file, and explore the code examples for login, callback, and profile. Implement Magic in your existing React application by installing the Magic SDK via npm or yarn.
And visit the dashboard and create an application and copy the test publishable key. Then paste that key here and choose your NPM client. Within time, your application would be ready and you will be greeted with this screen. This is what you see in the demo application which is react-summit-magic.vercel.app.
Then just enter your email ID which would enable a popup which would say that check your email, be emailed magic link to your email. And at this time, don't close this tab. You will receive an email from Magic with your application name and a button to login. And then once you are done, you will be greeted with your current user status showing your email ID and a logout button. So let me show how it looks in a react. In your terminal, you just need to run that, create an application, paste in here, choose your NPM package. And within seconds, your application is ready. Thanks for Mary-Chris for making this quick video. She's also, she's a colleague at magic labs. And then let's see what the magic CLI like the scaffolding gives us. So it gives you this particular code structure which has components like apps, callback, loading, login profile, and an index file and a magic.js file. Also there's a .env file.
So everything happens here. You can create like this or you can have different approach which I will show later on. Just import the magic SDK and pass on the publishable magic key. And then use in the app.js file. This is how we use it. Example using login, callback and profile. You can have a better understanding of the code by visiting this link. The callback js months and this is where we try to login with magic credential in the URL query. And this is simply a loading status when we wait for that, when we wait for the login to happen. And this is where everything happens, the login.js which performs login actions via magic's passwordless flow. Upon successful completion of login flow, a user is redirected to the homepage by history.push. And then there's a profile page which displays user's metadata. You can have a better understanding of the code by visiting this link on GitHub.
That was the quick start how you could use Magic and React, but how about implementing Magic in your existing React application? You can do that via npm install Magic SDK or yarn add Magic SDK.
4. Handling User Authentication with Magic
Short description:
Learn how to use environment keys in .env file or the Magic.js file to handle user authentication. Pass the publishable key and use Magic.auth.login to log in with a Magic link. The email received after clicking the button will log you in.
You either, it's always recommended to use your environment keys in .env file, but it's up to you how you are going to use it. One way is to use Magic.js file and have everything there. The other way is that having everything in single file, something like this, which imports the Magic SDK, pass on the publishable key, and then call Magic.auth.login with Magic link and pass on the email ID. Email that log in with magic link has various parameters, for example, email, show UI, or redirect UI. So it's up to you how you're going to use that, but the demo has redirect URI. So once you click the button, what you receive on your email, you will be logged in from there itself.
5. Decentralized Identity and DID Tokens
Short description:
Learn about decentralized identity and how it solves the authentication problem. Understand the DID format, including the scheme, method, and unique ID. Explore decentralized identity tokens (DIDT) and their use in managing permissions and authentication. Discover the structure of a typical DID code, including proof and claim. Generate a DID token using pseudocode and learn about its keys and encoding. Magic handles key management and offers resources to learn more. Connect with me for any questions and explore the decentralized identity space.
So how you could use DID and solve Auth problem without using the Magic SDK. So let's understand what is decentralized identity. A decentralized identity is a new type of identifier that is globally unique, resolvable, and has availability, and cryptographically verifiable. DID tokens are used as cryptographically generated proofs that are used to manage user access to your applications resource server.
For self-sovereign identity, which can be defined as a lifetime portable digital identity that does not depend on any centralized authority. So this is how the DID format looks, which has a scheme. It includes DID, also has a DID method, which depends on read, write, update, and delete based on what you want to perform. As well as includes, for example, UUID, that is the unique ID. And at last, it has a DID method specific string. It depends on the DID methods you use. Visit this link to understand more about the DID format.
Let's understand about DIDT, that is de-centralized identity tokens. By adapting W3C's DID protocol, the DID token created by magic client SDK leverages the Ethereum blockchain and elliptic cryptography to generate verifiable proof of identity and authorization. The proofs are encoded in lightweight digital signature. The lightweight digital signature that can be shared between client and server to manage permissions, protected routes, and resources or authenticate users.
This is how a typical DID code structure would look, which consists of proof and claim. Proof is a digital signature that proves the validity of a given claim. And claim is nothing but a data representing the user's access. And proof is signed data with Ethereum's personal sign method. Visit this link to understand how the personal sign Ethereum link, personal sign method on Ethereum works. And then there is binary to ASCII conversion encoding from proof and claim. DID token specification has its keys, for example, issue date, expiration timestamp, not valid before timestamp, issuer, subject, audience and it adds an encrypted signature of arbitrary serialized data and then a unique token identifier, which is something like this. This is how you generate a DID token, which is a pseudocode, which has IAT in this format, expiration time with the lifespan, issuer, who is your issuer, which uses the DID format, which uses the DID and the DID method and the specified string, then the subject would be, what would be the subject and then the audience and NF, NBF, which uses this format and then a token identifier. This signs the claim with the user's private key, this way the claim is verifiable and impossible to forge. And everything is encoded using binary to ASCII.
So this is how you generate a DID token. I hope you would have, you learned a lot about how to manage decentralized identity. So it's not about building your DID and how you build it. So Magic does a lot of things under the hood. It manages the key in very unique way. Everyone can generate a DID token, but it depends on how you're going to manage that. To learn more about how Magic handles its delegated key management, visit these links, as well as learn about Magic from Magic Docs and Magic Guides. These are the ways you can connect with me. Feel free to reach out if you have any questions around any topic, and I'll be sharing the slides link after this talk. I hope you had a wonderful day, and this talk has given you a vision to think about a decentralized identity space. So, bye, have a good day.
Available in other languages:
EN
React User Authentication for Self-Sovereign Identity with Magic
ES
Autenticación de usuarios de React para la identidad soberana con Magic
Check out more articles and videos
We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career
A Guide to React Rendering Behavior
React Advanced 2022
25
min
A Guide to React Rendering Behavior
Top Content
Mark Erikson
Replay.io
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
react
performance
deep dive
react rendering
Building Better Websites with Remix
React Summit Remote Edition 2021
33
min
Building Better Websites with Remix
Top Content
Michael Jackson
React Training
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
react
remix
frameworks
React Compiler - Understanding Idiomatic React (React Forget)
React Advanced 2023
33
min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
Watch video:
React Compiler - Understanding Idiomatic React (React Forget)
authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
react
build tools
builders and founders
react 19
react forget
Using useEffect Effectively
React Advanced 2022
30
min
Using useEffect Effectively
Top Content
David Khourshid
Stately
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
react
best practices
state management
react hook missing dependency
Routing in React 18 and Beyond
React Summit 2022
20
min
Routing in React 18 and Beyond
Top Content
Delba de Oliveira
Senior Developer Advocate @ Vercel
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
react
next.js
patterns
react file based routing
React Concurrency, Explained
React Summit 2023
23
min
React Concurrency, Explained
Top Content
Watch video:
React Concurrency, Explained
Ivan Akulov
Google Developer Expert, Web Performance Consultant, Netherlands
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
react
performance
best practices
react 18
deep dive
react concurrent mode
Workshops on related topic
React Performance Debugging Masterclass
React Summit 2023
170
min
React Performance Debugging Masterclass
Top Content
Featured Workshop
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
react
performance
best practices
advanced
debug
react debugger
react performance
react profiler
Next.js for React.js Developers
React Day Berlin 2023
157
min
Next.js for React.js Developers
Top Content
Featured Workshop
Free
Adrian Hajdin
In this advanced Next.js workshop, we will delve into key concepts and techniques that empower React.js developers to harness the full potential of Next.js. We will explore advanced topics and hands-on practices, equipping you with the skills needed to build high-performance web applications and make informed architectural decisions.
By the end of this workshop, you will be able to:1. Understand the benefits of React Server Components and their role in building interactive, server-rendered React applications.2. Differentiate between Edge and Node.js runtime in Next.js and know when to use each based on your project's requirements.3. Explore advanced Server-Side Rendering (SSR) techniques, including streaming, parallel vs. sequential fetching, and data synchronization.4. Implement caching strategies for enhanced performance and reduced server load in Next.js applications.5. Utilize React Actions to handle complex server mutation.6. Optimize your Next.js applications for SEO, social sharing, and overall performance to improve discoverability and user engagement.
react
nextjs react
Concurrent Rendering Adventures in React 18
React Advanced 2021
132
min
Concurrent Rendering Adventures in React 18
Top Content
Featured Workshop
Maurice de Beijer
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?
There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.
Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
react
concurrent rendering
react 18
react concurrent mode
react suspense
React Hooks Tips Only the Pros Know
React Summit Remote Edition 2021
177
min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
Maurice de Beijer
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
react
best practices
react hooks
deep dive
react 18 hooks
react profiler
Introducing FlashList: Let's build a performant React Native list all together
React Advanced 2022
81
min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
Featured Workshop
authors
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&A with Shopify team
react
react native
react native flashlist
React, TypeScript, and TDD
React Advanced 2021
174
min
React, TypeScript, and TDD
Top Content
Featured Workshop
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.
The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.
React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
react
best practices
typescript
devtools
web development
test driven development react
Main menu
Discover
Events
Talks
Workshops
People
Mentors
Articles
Multipass
All tags
Popular
javascript
react
vue
svelte
next.js
builders and founders
web development
typescript
frontend
best practices
node.js
code quality
fullstack
performance
react components
react hooks
css
testing
state management
design systems
Do not miss a deal from us. Get new talks, workshops, and free or discounted conference tickets
Upcoming events
Subscribe to the top JS conferences
and grow in-depth as engineer with insights from library authors and core teams
JSNation 2026
Amsterdam,
Jun 11 - 15, 2026
Want to sponsor our events?
React Summit 2026
Amsterdam,
Jun 11 - 15, 2026
TechLead Conf Amsterdam 2026: Adopting AI in Orgs Edition
Amsterdam,
Jun 11, 2026
Web Engineering Summit 2026
Amsterdam,
Jun 11 - 15, 2026
AI Coding Summit London
London,
Jul 6 - 7, 2026
React Advanced 2026
London,
Oct 23 - 26, 2026
JSNation US 2026
New York,
Nov 16 - 19, 2026
React Summit US 2026
New York,
Nov 17 - 20, 2026
React Day Berlin 2026
Berlin,
Dec 4 - 7, 2026