diff --git a/with-auth0/App.js b/with-auth0/App.js index df9c791..4bdba21 100644 --- a/with-auth0/App.js +++ b/with-auth0/App.js @@ -1,7 +1,7 @@ -import React from 'react'; -import { Alert, Button, StyleSheet, Text, View } from 'react-native'; -import * as AuthSession from 'expo-auth-session'; -import jwtDecode from 'jwt-decode'; +import * as AuthSession from "expo-auth-session"; +import jwtDecode from "jwt-decode"; +import * as React from "react"; +import { Alert, Button, Platform, StyleSheet, Text, View } from "react-native"; // You need to swap out the Auth0 client id and domain with the one from your Auth0 client. // In your Auth0 client, you need to also add a url to your authorized redirect urls. @@ -11,87 +11,80 @@ import jwtDecode from 'jwt-decode'; // // You can open this app in the Expo client and check your logs to find out your redirect URL. -const auth0ClientId = ''; -const auth0Domain = 'https://arielweinberger.eu.auth0.com'; +const auth0ClientId = ""; +const authorizationEndpoint = "https://arielweinberger.eu.auth0.com/authorize"; -export default class App extends React.Component { - state = { - name: null, - }; +const useProxy = Platform.select({ web: false, default: true }); +const redirectUri = AuthSession.makeRedirectUri({ useProxy }); - login = async () => { - // Retrieve the redirect URL, add this to the callback URL list - // of your Auth0 application. - const redirectUrl = AuthSession.getRedirectUrl(); - console.log(`Redirect URL: ${redirectUrl}`); +export default function App() { + const [name, setName] = React.useState(null); - // Structure the auth parameters and URL - const queryParams = toQueryString({ - client_id: auth0ClientId, - redirect_uri: redirectUrl, - response_type: 'id_token', // id_token will return a JWT token - scope: 'openid profile', // retrieve the user's profile - nonce: 'nonce', // ideally, this will be a random value - }); - const authUrl = `${auth0Domain}/authorize` + queryParams; + const [request, result, promptAsync] = AuthSession.useAuthRequest( + { + redirectUri, + clientId: auth0ClientId, + // id_token will return a JWT token + responseType: "id_token", + // retrieve the user's profile + scopes: ["openid", "profile"], + extraParams: { + // ideally, this will be a random value + nonce: "nonce", + }, + }, + { authorizationEndpoint } + ); - // Perform the authentication - const response = await AuthSession.startAsync({ authUrl }); - console.log('Authentication response', response); + // Retrieve the redirect URL, add this to the callback URL list + // of your Auth0 application. + console.log(`Redirect URL: ${redirectUri}`); - if (response.type === 'success') { - this.handleResponse(response.params); + React.useEffect(() => { + if (result) { + if (result.error) { + Alert.alert( + "Authentication error", + result.params.error_description || "something went wrong" + ); + return; + } + if (result.type === "success") { + // Retrieve the JWT token and decode it + const jwtToken = result.params.id_token; + const decoded = jwtDecode(jwtToken); + + const { name } = decoded; + setName(name); + } } - }; + }, [result]); - handleResponse = (response) => { - if (response.error) { - Alert('Authentication error', response.error_description || 'something went wrong'); - return; - } - - // Retrieve the JWT token and decode it - const jwtToken = response.id_token; - const decoded = jwtDecode(jwtToken); - - const { name } = decoded; - this.setState({ name }); - }; - - render() { - const { name } = this.state; - - return ( - - {name - ? You are logged in, {name}! - :