Skip to content

Commit abdb3d7

Browse files
lakhansamanilakhansamani
committed
update with-react-native-expo example
1 parent 1ca52bd commit abdb3d7

File tree

4 files changed

+41812
-15871
lines changed

4 files changed

+41812
-15871
lines changed

‎with-react-native-expo/App.js

+155-151
Original file line numberDiff line numberDiff line change
@@ -1,169 +1,173 @@
1-
import * as AuthSession from 'expo-auth-session';
2-
import jwtDecode from 'jwt-decode';
3-
import * as SecureStore from 'expo-secure-store';
4-
import { useEffect, useState } from 'react';
5-
import { Alert, Button, StyleSheet, Text, View } from 'react-native';
6-
import * as WebBrowser from 'expo-web-browser';
7-
import { Authorizer } from '@authorizerdev/authorizer-js';
1+
import * as AuthSession from "expo-auth-session";
2+
import jwtDecode from "jwt-decode";
3+
import * as SecureStore from "expo-secure-store";
4+
import { useEffect, useState } from "react";
5+
import { Alert, Button, StyleSheet, Text, View } from "react-native";
6+
import * as WebBrowser from "expo-web-browser";
7+
import { Authorizer } from "@authorizerdev/authorizer-js";
88

99
// You need to swap out the Authorizer client id and domain with the one from your Authorizer client.
1010
// In your Authorizer client, you need to also add a url to your authorized redirect urls.
1111

1212
const useProxy = false;
1313
const redirectUri = AuthSession.makeRedirectUri({ useProxy });
14+
console.log(redirectUri);
1415

15-
const authorizerClientID = '96fed66c-9779-4694-a79a-260fc489ce33';
16-
const authorizerURL = 'https://demo.authorizer.dev';
16+
const authorizerClientID = "96fed66c-9779-4694-a79a-260fc489ce33";
17+
const authorizerURL = "https://demo.authorizer.dev";
1718
const authorizationEndpoint = `${authorizerURL}/authorize`;
1819
const authorizerRef = new Authorizer({
19-
clientID: authorizerClientID,
20-
authorizerURL: authorizerURL,
21-
redirectURL: redirectUri,
20+
clientID: authorizerClientID,
21+
authorizerURL: authorizerURL,
22+
redirectURL: redirectUri,
2223
});
2324

2425
const authorizerRefreshTokenKey = `authorizer_refresh_token`;
2526

2627
export default function App() {
27-
const [email, setEmail] = useState(null);
28-
const [loading, setLoading] = useState(true);
29-
30-
const [request, result, promptAsync] = AuthSession.useAuthRequest(
31-
{
32-
redirectUri,
33-
clientId: authorizerClientID,
34-
// id_token will return a JWT token
35-
responseType: 'token',
36-
// use offline access to get a refresh token and perform silent refresh in background
37-
scopes: ['openid', 'profile', 'email', 'offline_access'],
38-
extraParams: {
39-
// ideally, this will be a random value
40-
nonce: 'nonce',
41-
},
42-
},
43-
{ authorizationEndpoint }
44-
);
45-
46-
// on init silently refresh token if it exists
47-
useEffect(() => {
48-
async function silentRefresh() {
49-
try {
50-
const refreshToken = await SecureStore.getItemAsync(
51-
authorizerRefreshTokenKey
52-
);
53-
if (refreshToken) {
54-
try {
55-
const res = await authorizerRef.getToken({
56-
grant_type: 'refresh_token',
57-
refresh_token: refreshToken,
58-
});
59-
await SecureStore.setItemAsync(
60-
'authorizer_refresh_token',
61-
res.refresh_token
62-
);
63-
setEmail(jwtDecode(res.id_token).email);
64-
} catch (err) {
65-
console.error(err);
66-
await SecureStore.deleteItemAsync(authorizerRefreshTokenKey);
67-
}
68-
}
69-
} catch (error) {
70-
setEmail(null);
71-
await SecureStore.deleteItemAsync(authorizerRefreshTokenKey);
72-
} finally {
73-
setLoading(false);
74-
}
75-
}
76-
silentRefresh();
77-
}, []);
78-
79-
useEffect(() => {
80-
async function setResult() {
81-
if (result) {
82-
if (result.params.refresh_token) {
83-
await SecureStore.setItemAsync(
84-
authorizerRefreshTokenKey,
85-
result.params.refresh_token
86-
);
87-
}
88-
89-
if (result.error) {
90-
Alert.alert(
91-
'Authentication error',
92-
result.params.error_description || 'something went wrong'
93-
);
94-
return;
95-
}
96-
97-
if (result.type === 'success') {
98-
// Retrieve the JWT token and decode it
99-
const jwtToken = result.params.id_token;
100-
const decoded = jwtDecode(jwtToken);
101-
102-
const { email } = decoded;
103-
setEmail(email);
104-
}
105-
}
106-
}
107-
setResult();
108-
}, [result]);
109-
110-
const handleLogout = async () => {
111-
setLoading(true);
112-
setEmail(null);
113-
114-
try {
115-
const refreshToken = await SecureStore.getItemAsync(
116-
authorizerRefreshTokenKey
117-
);
118-
await authorizerRef.revokeToken({
119-
refresh_token: refreshToken,
120-
});
121-
await SecureStore.deleteItemAsync(authorizerRefreshTokenKey);
122-
await WebBrowser.openAuthSessionAsync(
123-
`${authorizerURL}/logout?redirect_uri=${redirectUri}`,
124-
'redirectUrl'
125-
);
126-
} catch (err) {
127-
console.log(err);
128-
} finally {
129-
setLoading(false);
130-
}
131-
};
132-
133-
return (
134-
<View style={styles.container}>
135-
{loading ? (
136-
<Text>Loading...</Text>
137-
) : (
138-
<View>
139-
{email ? (
140-
<>
141-
<Text style={styles.title}>You are logged in, {email}!</Text>
142-
<Button title="Log out" onPress={handleLogout} />
143-
</>
144-
) : (
145-
<Button
146-
disabled={!request}
147-
title="Log in with Authorizer"
148-
onPress={() => promptAsync({ useProxy })}
149-
/>
150-
)}
151-
</View>
152-
)}
153-
</View>
154-
);
28+
const [email, setEmail] = useState(null);
29+
const [loading, setLoading] = useState(true);
30+
31+
const [request, result, promptAsync] = AuthSession.useAuthRequest(
32+
{
33+
redirectUri,
34+
clientId: authorizerClientID,
35+
// id_token will return a JWT token
36+
responseType: "token",
37+
// use offline access to get a refresh token and perform silent refresh in background
38+
scopes: ["openid", "profile", "email", "offline_access"],
39+
extraParams: {
40+
// ideally, this will be a random value
41+
nonce: "nonce",
42+
},
43+
},
44+
{ authorizationEndpoint }
45+
);
46+
47+
// on init silently refresh token if it exists
48+
useEffect(() => {
49+
async function silentRefresh() {
50+
try {
51+
const refreshToken = await SecureStore.getItemAsync(
52+
authorizerRefreshTokenKey
53+
);
54+
console.log(refreshToken);
55+
if (refreshToken) {
56+
try {
57+
const res = await authorizerRef.getToken({
58+
grant_type: "refresh_token",
59+
refresh_token: refreshToken,
60+
});
61+
console.log({ res });
62+
await SecureStore.setItemAsync(
63+
"authorizer_refresh_token",
64+
res.refresh_token
65+
);
66+
67+
setEmail(jwtDecode(res.id_token).email);
68+
} catch (err) {
69+
console.error(JSON.stringify(err));
70+
await SecureStore.deleteItemAsync(authorizerRefreshTokenKey);
71+
}
72+
}
73+
} catch (error) {
74+
setEmail(null);
75+
await SecureStore.deleteItemAsync(authorizerRefreshTokenKey);
76+
} finally {
77+
setLoading(false);
78+
}
79+
}
80+
silentRefresh();
81+
}, []);
82+
83+
useEffect(() => {
84+
async function setResult() {
85+
if (result) {
86+
if (result.params.refresh_token) {
87+
await SecureStore.setItemAsync(
88+
authorizerRefreshTokenKey,
89+
result.params.refresh_token
90+
);
91+
}
92+
93+
if (result.error) {
94+
Alert.alert(
95+
"Authentication error",
96+
result.params.error_description || "something went wrong"
97+
);
98+
return;
99+
}
100+
101+
if (result.type === "success") {
102+
// Retrieve the JWT token and decode it
103+
const jwtToken = result.params.id_token;
104+
const decoded = jwtDecode(jwtToken);
105+
106+
const { email } = decoded;
107+
setEmail(email);
108+
}
109+
}
110+
}
111+
setResult();
112+
}, [result]);
113+
114+
const handleLogout = async () => {
115+
setLoading(true);
116+
setEmail(null);
117+
118+
try {
119+
const refreshToken = await SecureStore.getItemAsync(
120+
authorizerRefreshTokenKey
121+
);
122+
await authorizerRef.revokeToken({
123+
refresh_token: refreshToken,
124+
});
125+
await SecureStore.deleteItemAsync(authorizerRefreshTokenKey);
126+
await WebBrowser.openAuthSessionAsync(
127+
`${authorizerURL}/logout?redirect_uri=${redirectUri}`,
128+
"redirectUrl"
129+
);
130+
} catch (err) {
131+
console.log(err);
132+
} finally {
133+
setLoading(false);
134+
}
135+
};
136+
137+
return (
138+
<View style={styles.container}>
139+
{loading ? (
140+
<Text>Loading...</Text>
141+
) : (
142+
<View>
143+
{email ? (
144+
<>
145+
<Text style={styles.title}>You are logged in, {email}!</Text>
146+
<Button title="Log out" onPress={handleLogout} />
147+
</>
148+
) : (
149+
<Button
150+
disabled={!request}
151+
title="Log in with Authorizer"
152+
onPress={() => promptAsync({ useProxy })}
153+
/>
154+
)}
155+
</View>
156+
)}
157+
</View>
158+
);
155159
}
156160

157161
const styles = StyleSheet.create({
158-
container: {
159-
flex: 1,
160-
backgroundColor: '#fff',
161-
alignItems: 'center',
162-
justifyContent: 'center',
163-
},
164-
title: {
165-
fontSize: 20,
166-
textAlign: 'center',
167-
marginTop: 40,
168-
},
162+
container: {
163+
flex: 1,
164+
backgroundColor: "#fff",
165+
alignItems: "center",
166+
justifyContent: "center",
167+
},
168+
title: {
169+
fontSize: 20,
170+
textAlign: "center",
171+
marginTop: 40,
172+
},
169173
});

0 commit comments

Comments
 (0)