init

.expo-shared/assets.json

@@ -0,0 +1,10 @@
+{
+  "324343801b23c6577458a3431a05440f9c22f323f161d74c747448bb703c0f6d": true,
+  "8181ac5508f951dc37e18faa01d2de7faaf34adf0a8e61aeb79fee86e5164299": true,
+  "7b5a4a64ec2ff67d330feffaa83e89e7bd27241884bc25a76e22c2de341eb7ae": true,
+  "8d5b75dd23943a9c5db27c4ce575811676f7492aa1639be3d51d30e8b2a25ac7": true,
+  "5cce99a994e3834b7c97ecfaa51dcae0586033ee598ccf66f17511aed9cd13f5": true,
+  "efa037c3e544f72053c423792f3c15687929f624f58b2bf5415c0d7b9937e962": true,
+  "89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44": true,
+  "e90de45cab7df3b8671ca45967ef9052183bd8662d78442c259c04700762827d": true
+}

.gitignore

@@ -0,0 +1,8 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p12
+*.key
+*.mobileprovision
+secrets.js

.watchmanconfig

@@ -0,0 +1 @@
+{}

App.js

@@ -0,0 +1,114 @@
+import React from "react";
+import { StyleSheet, Text, View, Button, Alert } from "react-native";
+import { AuthSession } from "expo";
+import Constants from "expo-constants";
+import jwtDecode from "jwt-decode";
+
+import Entrance from "./pages/Entrance";
+import Main from "./pages/Main";
+import createAuth0Client from "@auth0/auth0-spa-js";
+
+const { auth0ClientId, auth0Domain } = Constants.manifest.extra;
+
+/**
+ * Converts an object to a query string.
+ */
+function toQueryString(params) {
+  return (
+    "?" +
+    Object.entries(params)
+      .map(
+        ([key, value]) =>
+          `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
+      )
+      .join("&")
+  );
+}
+
+export default class App extends React.Component {
+  state = {
+    name: null
+  };
+
+  logout = async () => {
+    const response = await AuthSession.dismiss();
+    console.log("logout", response);
+    this.setState({ name: null });
+  };
+
+  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}`);
+
+    // 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 user_metadata", // retrieve the user's profile
+      nonce: "nonce" // ideally, this will be a random value
+    });
+
+    const authUrl = `${auth0Domain}/authorize` + queryParams;
+
+    // Perform the authentication
+    const response = await AuthSession.startAsync({ authUrl });
+    console.log("Authentication response ** ", response);
+
+    if (response.type === "success") {
+      this.handleResponse(response.params);
+    }
+  };
+
+  handleResponse = response => {
+    if (response.error) {
+      Alert(
+        "Authentication error",
+        response.error_description || "something went wrong"
+      );
+      return;
+    }
+
+    // Retrieve the JWT token and decode it
+    console.log(response, "response");
+    console.log(response.user_metadata, "metadata");
+    // console.log(jwtDecode(response.user_metadata), 'decoded **')
+
+    const jwtToken = response.id_token;
+    const decoded = jwtDecode(jwtToken);
+
+    console.log(decoded, "decoded id_token ***");
+    const { name } = decoded;
+    this.setState({ name });
+  };
+
+  render() {
+    const { name } = this.state;
+
+    return (
+      <View style={styles.container}>
+        {name ? (
+          <Main name={name} logout={this.logout} />
+        ) : (
+          <Entrance onLogin={this.login} />
+        )}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  title: {
+    fontSize: 20,
+    textAlign: "center",
+    marginTop: 40
+  }
+});

README.md

@@ -0,0 +1,32 @@
+# auth0-example
+Credits to @brentvatne for creating the original version two years ago.
+
+## Setup
+* Create your own application client on [Auth0](https://auth0.com).
+* In the application settings, you must add the **redirect URL** for your Expo application that is coming from the `AuthSession` module (built-in in Expo).
+
+  The structure of the URL is:
+  `https://auth.expo.io/@your-username/your-expo-app-slug`
+
+  Your Expo app slug can be found in the [app.json](app.json) file.
+
+  You can get the full redirect URL by simply logging `AuthSession.getRedirectUrl()` in your own codebase.
+
+## Example
+Feel free to run the example and test it yourself, and read through [App.js](App.js) to better understand how it works.
+
+If you are using NPM:
+```
+npm install
+npm start
+```
+
+If you are using yarn:
+```
+yarn install
+yarn start
+```
+
+Make sure to replace the `auth0ClientId` and `auth0Domain` values with the ones from your Auth0 application.
+
+![Application Settings](images/image-1.jpeg)

app.json

@@ -0,0 +1,33 @@
+{
+  "expo": {
+    "name": "auth0-example",
+    "slug": "auth0-example",
+    "privacy": "public",
+    "sdkVersion": "36.0.0",
+    "platforms": [
+      "ios",
+      "android"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "extra": {
+      "auth0ClientId": "****",
+      "auth0Domain": "https://dev-***.eu.auth0.com"
+    }
+  }
+}

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

components/MaterialButtonDark.js

@@ -0,0 +1,37 @@
+import React, { Component } from "react";
+import { StyleSheet, TouchableOpacity, Text } from "react-native";
+
+function MaterialButtonDark(props) {
+  return (
+    <TouchableOpacity style={[styles.container, props.style]} onPress={props.onPress}>
+      <Text style={styles.caption}>{props.text1 || "BUTTON"}</Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "#212121",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingRight: 16,
+    paddingLeft: 16,
+    elevation: 2,
+    minWidth: 88,
+    borderRadius: 2,
+    shadowOffset: {
+      height: 1,
+      width: 0
+    },
+    shadowColor: "#000",
+    shadowOpacity: 0.35,
+    shadowRadius: 5
+  },
+  caption: {
+    color: "#fff",
+    fontSize: 30,
+  }
+});
+
+export default MaterialButtonDark;