https://github.com/arunoda/use-magic-link
Simple auth setup for your React app in few minutes with Magic Link.
https://github.com/arunoda/use-magic-link
authentication magiclink react
Last synced: 6 months ago
JSON representation
Simple auth setup for your React app in few minutes with Magic Link.
- Host: GitHub
- URL: https://github.com/arunoda/use-magic-link
- Owner: arunoda
- License: mit
- Created: 2020-05-20T10:36:15.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T06:28:18.000Z (over 2 years ago)
- Last Synced: 2024-04-12T13:02:04.650Z (about 1 year ago)
- Topics: authentication, magiclink, react
- Language: JavaScript
- Homepage:
- Size: 572 KB
- Stars: 111
- Watchers: 6
- Forks: 6
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# use-magic-link
Simple auth setup for your React app in few minutes with [Magic Link](https://magic.link).
[Read this guide](https://arunoda.me/blog/simple-auth-setup-for-your-react-app)
## Install the React Hook
```
yarn add use-magic-link
```
## Example
Here's how this React hook works:
```js
// Get this with "yarn add use-magic-link"
import useMagicLink from 'use-magic-link'
export default function Home() {
// create the hook
const auth = useMagicLink('');
function loginNow() {
const email = prompt('Enter your email');
auth.login(email);
}
function getContent() {
// Show a loading screen until we detect the login-state
if (auth.loading || auth.loggingIn || auth.loggingOut) {
return '...'
}
// Show this, if logged in
if (auth.loggedIn) {
return (
You are logged-in.
auth.logout()}>Logout
)
}
// Show this, if not logged-in
return (
Login Now
)
}
return (
Next.js Bank
{getContent()}
)
}
```
## API
You will get an auth object after you call the `use-magic-link` React hook.
> Make sure to call this inside a functional component or inside another React hook.
```
import useMagicLink from 'use-magic-link'
// inside a functional component
const auth = useMagicLink('')
```
> You can get the `` by logging into the [Magic Link dashboard](https://magic.link/).
Here are the properties of `auth`:
### auth.loading
It will be `true`, until we load additional libraries and check the current login state.
### auth.loggedIn
It will be `true`, if we are loggedIn, otherwise `false`.
### auth.loggingIn
It will be `true`, once we start the login process.
### auth.loggingOut
It will be `true`, once we start the logout process.
### auth.error
Store the error object, if something goes wrong.
### auth.login(email)
You can start the login process by passing a valid email.
### auth.logout()
You can start the logout process.
### auth.fetch
An instance of `fetch`, which automatically includes the Magic Link token. You can use this to call any API which uses `@magic-sdk/admin` NPM module to authenticate the request.
[Read this guide for more information](https://arunoda.me/blog/simple-auth-setup-for-your-react-app)
### auth.magic
The underline Magic Link API client. Read Magic Link [documentation](https://docs.magic.link/) on how to use it.