Updated to new auth-session API

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 (
-      <View style={styles.container}>
-        {name
-          ? <Text style={styles.title}>You are logged in, {name}!</Text>
-          : <Button title="Log in with Auth0" onPress={this.login} />
-        }
-      </View>
-    );
-  }
+  return (
+    <View style={styles.container}>
+      {name ? (
+        <Text style={styles.title}>You are logged in, {name}!</Text>
+      ) : (
+        <Button
+          disabled={!request}
+          title="Log in with Auth0"
+          onPress={() => promptAsync({ useProxy })}
+        />
+      )}
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
   },
   title: {
     fontSize: 20,
-    textAlign: 'center',
+    textAlign: "center",
     marginTop: 40,
   },
 });
-
-
-/**
- * Converts an object to a query string.
- */
-function toQueryString(params) {
-  return '?' + Object.entries(params)
-    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
-    .join('&');
-}

with-auth0/README.md

@@ -5,6 +5,8 @@
   <img alt="Supports Expo iOS" longdesc="Supports Expo iOS" src="https://img.shields.io/badge/iOS-4630EB.svg?style=flat-square&logo=APPLE&labelColor=999999&logoColor=fff" />
   <!-- Android -->
   <img alt="Supports Expo Android" longdesc="Supports Expo Android" src="https://img.shields.io/badge/Android-4630EB.svg?style=flat-square&logo=ANDROID&labelColor=A4C639&logoColor=fff" />
+  <!-- Web -->
+  <img alt="Supports Expo Web" longdesc="Supports Expo Web" src="https://img.shields.io/badge/web-4630EB.svg?style=flat-square&logo=GOOGLE-CHROME&labelColor=4285F4&logoColor=fff" />
 </p>
 
 ## 🚀 How to use

with-auth0/package.json

@@ -1,10 +1,12 @@
 {
   "dependencies": {
     "expo": "37.0.7",
-    "expo-auth-session": "1.1.0",
+    "expo-auth-session": "^1.2.1",
     "jwt-decode": "2.2.0",
     "react": "16.9.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz"
+    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
+    "react-native-web": "^0.11",
+    "react-dom": "16.9.0"
   },
   "devDependencies": {
     "@babel/core": "7.9.0"

with-twitter-auth/README.md

@@ -5,6 +5,8 @@
   <img alt="Supports Expo iOS" longdesc="Supports Expo iOS" src="https://img.shields.io/badge/iOS-4630EB.svg?style=flat-square&logo=APPLE&labelColor=999999&logoColor=fff" />
   <!-- Android -->
   <img alt="Supports Expo Android" longdesc="Supports Expo Android" src="https://img.shields.io/badge/Android-4630EB.svg?style=flat-square&logo=ANDROID&labelColor=A4C639&logoColor=fff" />
+  <!-- Web -->
+  <img alt="Supports Expo Web" longdesc="Supports Expo Web" src="https://img.shields.io/badge/web-4630EB.svg?style=flat-square&logo=GOOGLE-CHROME&labelColor=4285F4&logoColor=fff" />
 </p>
 
 This example demonstrates how to implement a "login with Twitter" button, using a simple backend and the AuthSession module.