Add example app

Author: jevakallio

Example/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react-native"]
+}

Example/.buckconfig

@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2

Example/.eslintrc

@@ -0,0 +1,20 @@
+---
+extends:
+  - formidable/configurations/es6-react
+plugins:
+  - jest
+env:
+  jest/globals: true
+  browser: true
+rules:
+  quotes:
+    - error
+    - double
+  no-unsafe-negation:
+    - off
+  max-nested-callbacks:
+    - off
+  arrow-parens:
+    - off
+  filenames/match-regex:
+    - off

Example/.flowconfig

@@ -0,0 +1,48 @@
+[ignore]
+; We fork some components by platform
+.*/*[.]android.js
+
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/\.buckd/
+
+; Ignore unexpected extra "@providesModule"
+.*/node_modules/.*/node_modules/fbjs/.*
+
+; Ignore duplicate module providers
+; For RN Apps installed via npm, "Libraries" folder is inside
+; "node_modules/react-native" but in the source repo it is in the root
+.*/Libraries/react-native/React.js
+
+; Ignore polyfills
+.*/Libraries/polyfills/.*
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow/
+
+[options]
+emoji=true
+
+module.system=haste
+
+munge_underscores=true
+
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FlowFixMeProps
+suppress_type=$FlowFixMeState
+suppress_type=$FixMe
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
+
+unsafe.enable_getters_and_setters=true
+
+[version]
+^0.56.0

Example/.gitattributes

@@ -0,0 +1 @@
+*.pbxproj -text

Example/.gitignore

@@ -0,0 +1,53 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots

Example/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "printWidth": 100,
+  "singleQuote": true
+}

Example/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "javascript.validate.enable": false
+}

Example/.watchmanconfig

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

Example/App.js

@@ -0,0 +1,114 @@
+// @flow
+
+import React, { Component } from 'react';
+import { UIManager, LayoutAnimation } from 'react-native';
+import AppAuth from 'react-native-app-auth';
+import { Page, Button, ButtonContainer, Form, Heading } from './components';
+
+UIManager.setLayoutAnimationEnabledExperimental &&
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+
+const scopes = ['openid', 'profile', 'email', 'offline_access'];
+
+type State = {
+  hasLoggedInOnce: boolean,
+  accessToken: ?string,
+  accessTokenExpirationDate: ?string,
+  refreshToken: ?string
+};
+
+export default class App extends Component<{}, State> {
+  auth = new AppAuth({
+    issuer: 'https://demo.identityserver.io',
+    clientId: 'native.code',
+    redirectUrl: 'io.identityserver.demo:/oauthredirect'
+  });
+
+  state = {
+    hasLoggedInOnce: false,
+    accessToken: '',
+    accessTokenExpirationDate: '',
+    refreshToken: ''
+  };
+
+  animateState(nextState: $Shape<State>, delay: number = 0) {
+    setTimeout(() => {
+      this.setState(() => {
+        LayoutAnimation.easeInEaseOut();
+        return nextState;
+      });
+    }, delay);
+  }
+
+  authorize = async () => {
+    try {
+      const authState = await this.auth.authorize(scopes);
+      this.animateState(
+        {
+          hasLoggedInOnce: true,
+          accessToken: authState.accessToken,
+          accessTokenExpirationDate: authState.accessTokenExpirationDate,
+          refreshToken: authState.refreshToken
+        },
+        500
+      );
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  refresh = async () => {
+    try {
+      const authState = await this.auth.refresh(this.state.refreshToken, scopes);
+      this.animateState({
+        accessToken: authState.accessToken || this.state.accessToken,
+        accessTokenExpirationDate:
+          authState.accessTokenExpirationDate || this.state.accessTokenExpirationDate,
+        refreshToken: authState.refreshToken || this.state.refreshToken
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  revoke = async () => {
+    try {
+      await this.auth.revokeToken(this.state.accessToken, true);
+      this.animateState({
+        accessToken: '',
+        accessTokenExpirationDate: '',
+        refreshToken: ''
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  render() {
+    const { state } = this;
+    return (
+      <Page>
+        {!!state.accessToken ? (
+          <Form>
+            <Form.Label>accessToken</Form.Label>
+            <Form.Value>{state.accessToken}</Form.Value>
+            <Form.Label>accessTokenExpirationDate</Form.Label>
+            <Form.Value>{state.accessTokenExpirationDate}</Form.Value>
+            <Form.Label>refreshToken</Form.Label>
+            <Form.Value>{state.refreshToken}</Form.Value>
+          </Form>
+        ) : (
+          <Heading>{state.hasLoggedInOnce ? 'Goodbye.' : 'Hello, stranger.'}</Heading>
+        )}
+
+        <ButtonContainer>
+          {!state.accessToken && (
+            <Button onPress={this.authorize} text="Authorize" color="#DA2536" />
+          )}
+          {!!state.refreshToken && <Button onPress={this.refresh} text="Refresh" color="#24C2CB" />}
+          {!!state.accessToken && <Button onPress={this.revoke} text="Revoke" color="#EF525B" />}
+        </ButtonContainer>
+      </Page>
+    );
+  }
+}