Skip to content

Commit 6f61b72

Browse files
romin-halltariromin-halltari
authored
Merge pull request #666 from magiclabs/rominhalltari-sc-69797-react-native-ext-add-readme-to-rn-extension
Add README for `react-native-bare-oauth` and `react-native-expo-oauth`
2 parents a594e41 + efd6c6a commit 6f61b72

File tree

3 files changed

+168
-44
lines changed

3 files changed

+168
-44
lines changed

‎packages/@magic-ext/react-native-bare-oauth/README.md

Lines changed: 64 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,67 @@
1-
21

3-
42

53

4+
5+
6+
# 🔒 Magic OAuth Extension for React Native (Bare)
7+
8+
[![<MagicLabs>](https://circleci.com/gh/magiclabs/magic-js.svg?style=shield)](https://circleci.com/gh/magiclabs/magic-js)
9+
10+
> With the Magic JavaScript SDK OAuth extension, you can plug into your favorite social login providers with one, easy-to-use API.
11+
12+
<p align="center">
13+
<a href="https://github.com/magiclabs/magic-js/blob/master/packages/@magic-ext/oauth/LICENSE">License</a> ·
14+
<a href="https://github.com/magiclabs/magic-js/blob/master/packages/@magic-ext/oauth/CHANGELOG.md">Changelog</a> ·
15+
<a href="https://github.com/magiclabs/magic-js/blob/master/CONTRIBUTING.md">Contributing Guide</a>
16+
</p>
17+
18+
## 📖 Documentation
19+
20+
See the [developer documentation](https://magic.link/docs/social-login) to learn how to get started with OAuth in Magic SDK.
21+
22+
## 🔗 Installation
23+
24+
Integrating your app with OAuth will require our client-side NPM package and OAuth extension:
25+
26+
```bash
27+
# Via NPM:
28+
npm install --save @magic-ext/react-native-bare-oauth
29+
30+
# Via Yarn:
31+
yarn add @magic-ext/react-native-bare-oauth
32+
```
33+
### ⚠️ This library can only be used on a bare react native project that uses [@magic-sdk/react-native-bare](https://github.com/magiclabs/magic-js/tree/master/packages/%40magic-sdk/react-native-bare).
34+
35+
## ⚡️ Quick Start
36+
37+
Sign up or log in to the [developer dashboard](https://dashboard.magic.link ) to receive API keys that will allow your application to interact with Magic's authentication APIs.
38+
39+
Then, you can start authenticating users with _just one method!_
40+
41+
```tsx
42+
import React from 'react';
43+
import { Magic } from '@magic-sdk/react-native-bare';
44+
import { OAuthExtension } from "@magic-ext/react-native-bare-oauth";
45+
import { SafeAreaProvider } from 'react-native-safe-area-context';
46+
47+
const magic = new Magic(apiKey, {
48+
endpoint: 'https://box.magic.link',
49+
extensions: [
50+
new OAuthExtension()
51+
],
52+
});
53+
54+
export default function App() {
55+
return <>
56+
<SafeAreaProvider>
57+
{/* Render the Magic iframe! */}
58+
<magic.Relayer />
59+
{...}
60+
</SafeAreaProvider>
61+
</>
62+
}
63+
64+
// Somewhere else in your code...
65+
await magic.auth.loginWithEmailOTP({ email: '[email protected]' });
66+
```
67+
⁠⁠👉 Check out some of our [React Native Demo apps](https://github.com/magiclabs/react-native-demo) for inspiration! 👀

‎packages/@magic-ext/react-native-expo-oauth/README.md

Lines changed: 64 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,67 @@
11

2-
3-
42

53

4+
5+
6+
# 🔒 Magic OAuth Extension for React Native (Expo)
7+
8+
[![<MagicLabs>](https://circleci.com/gh/magiclabs/magic-js.svg?style=shield)](https://circleci.com/gh/magiclabs/magic-js)
9+
10+
> With the Magic JavaScript SDK OAuth extension, you can plug into your favorite social login providers with one, easy-to-use API.
11+
12+
<p align="center">
13+
<a href="https://github.com/magiclabs/magic-js/blob/master/packages/@magic-ext/oauth/LICENSE">License</a> ·
14+
<a href="https://github.com/magiclabs/magic-js/blob/master/packages/@magic-ext/oauth/CHANGELOG.md">Changelog</a> ·
15+
<a href="https://github.com/magiclabs/magic-js/blob/master/CONTRIBUTING.md">Contributing Guide</a>
16+
</p>
17+
18+
## 📖 Documentation
19+
20+
See the [developer documentation](https://magic.link/docs/social-login) to learn how to get started with OAuth in Magic SDK.
21+
22+
## 🔗 Installation
23+
24+
Integrating your app with OAuth will require our client-side NPM package and OAuth extension:
25+
26+
```bash
27+
# Via NPM:
28+
npm install --save @magic-ext/react-native-expo-oauth
29+
30+
# Via Yarn:
31+
yarn add @magic-ext/react-native-expo-oauth
32+
```
33+
### ⚠️ This library can only be used on an Expo project that uses [@magic-sdk/react-native-expo](https://github.com/magiclabs/magic-js/tree/master/packages/%40magic-sdk/react-native-expo).
34+
35+
## ⚡️ Quick Start
36+
37+
Sign up or log in to the [developer dashboard](https://dashboard.magic.link ) to receive API keys that will allow your application to interact with Magic's authentication APIs.
38+
39+
Then, you can start authenticating users with _just one method!_
40+
41+
```tsx
42+
import React from 'react';
43+
import { Magic } from '@magic-sdk/react-native-expo';
44+
import { OAuthExtension } from "@magic-ext/react-native-expo-oauth";
45+
import { SafeAreaProvider } from 'react-native-safe-area-context';
46+
47+
const magic = new Magic(apiKey, {
48+
endpoint: 'https://box.magic.link',
49+
extensions: [
50+
new OAuthExtension()
51+
],
52+
});
53+
54+
export default function App() {
55+
return <>
56+
<SafeAreaProvider>
57+
{/* Render the Magic iframe! */}
58+
<magic.Relayer />
59+
{...}
60+
</SafeAreaProvider>
61+
</>
62+
}
63+
64+
// Somewhere else in your code...
65+
await magic.auth.loginWithEmailOTP({ email: '[email protected]' });
66+
```
67+
⁠⁠👉 Check out some of our [React Native Demo apps](https://github.com/magiclabs/react-native-demo) for inspiration! 👀

0 commit comments

Comments
 (0)