feat: Add withAuth higher order component

bjerkio · Apr 16, 2020 · 9f2cea8 · 9f2cea8
1 parent 9247d78
commit 9f2cea8
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 24 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -18,6 +18,7 @@
 
 * [AuthProvider](README.md#const-authprovider)
 * [useAuth](README.md#const-useauth)
+* [withAuth](README.md#withauth)
 
 ## Variables
 
@@ -49,3 +50,23 @@ ___
 ▸ **useAuth**(): *[AuthContextProps](interfaces/authcontextprops.md)*
 
 **Returns:** *[AuthContextProps](interfaces/authcontextprops.md)*
+
+___
+
+###  withAuth
+
+▸ **withAuth**<**P**>(`Component`: React.ComponentType‹P›): *FunctionComponent‹object›*
+
+A public higher-order component to access the imperative API
+
+**Type parameters:**
+
+▪ **P**: *[AuthContextProps](interfaces/authcontextprops.md)*
+
+**Parameters:**
+
+Name | Type |
+------ | ------ |
+`Component` | React.ComponentType‹P› |
+
+**Returns:** *FunctionComponent‹object›*
diff --git a/docs/interfaces/authproviderprops.md b/docs/interfaces/authproviderprops.md
@@ -17,6 +17,8 @@
 * [onSignIn](authproviderprops.md#optional-onsignin)
 * [onSignOut](authproviderprops.md#optional-onsignout)
 * [redirectUri](authproviderprops.md#optional-redirecturi)
+* [responseType](authproviderprops.md#optional-responsetype)
+* [scope](authproviderprops.md#optional-scope)
 * [userManager](authproviderprops.md#optional-usermanager)
 
 ## Properties
@@ -79,6 +81,24 @@ The redirect URI of your client application to receive a response from the OIDC/
 
 ___
 
+### `Optional` responseType
+
+• **responseType**? : *undefined | string*
+
+Tells the authorization server which grant to execute
+
+Read more: https://tools.ietf.org/html/rfc6749#section-3.1.1
+
+___
+
+### `Optional` scope
+
+• **scope**? : *undefined | string*
+
+A space-delimited list of permissions that the application requires.
+
+___
+
 ### `Optional` userManager
 
 • **userManager**? : *UserManager*

diff --git a/guides/WITHAUTH.md b/guides/WITHAUTH.md
@@ -0,0 +1,26 @@
+# Hooks
+
+OIDC React comes with a HOC withAuth! withAuth is a great way, much better then using our [Consumer](https://reactjs.org/docs/context.html#contextconsumer).
+
+## `withAuth`
+
+withAuth returns a component wrapped in [authContext](../docs/interfaces/authcontextprops.md). Let's look at an example of use.
+
+```typescript
+import { useAuth } from 'oidc-react';
+
+class Hello extends React.PureComponent<{}, {}> {
+  render( = () => {
+    return (
+      <p>Hello {this.props.authData.profile.name}!</p>
+    );
+  }
+}
+
+
+export default withAuth(Hello);
+```
+
+The example above uses `id_token` object (`profile`) and displays the name of the user.
+
+It should be as easy as that!
diff --git a/src/index.ts b/src/index.ts
@@ -1,2 +1,3 @@
 export * from './AuthContext';
-export * from './useAuth';
+export * from './useAuth';
+export * from './withAuth';
diff --git a/src/withAuth.tsx b/src/withAuth.tsx
@@ -0,0 +1,21 @@
+import { AuthContextProps } from './AuthContext';
+import { useAuth } from './useAuth';
+import React from 'react';
+
+/**
+ * A public higher-order component to access the imperative API
+ */
+export default function withAuth<P extends AuthContextProps>(
+  Component: React.ComponentType<P>,
+) {
+  const displayName = `withAuth(${Component.displayName || Component.name})`;
+  const C: React.FC<Omit<P, keyof AuthContextProps>> = (props) => {
+    const auth = useAuth();
+
+    return <Component {...(props as P)} {...auth} />;
+  };
+
+  C.displayName = displayName;
+
+  return C;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -949,16 +949,6 @@
     regexpp "^3.0.0"
     tsutils "^3.17.1"
 
-"@typescript-eslint/experimental-utils@2.27.0":
-  version "2.27.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.27.0.tgz#801a952c10b58e486c9a0b36cf21e2aab1e9e01a"
-  integrity sha512-vOsYzjwJlY6E0NJRXPTeCGqjv5OHgRU1kzxHKWJVPjDYGbPgLudBXjIlc+OD1hDBZ4l1DLbOc5VjofKahsu9Jw==
-  dependencies:
-    "@types/json-schema" "^7.0.3"
-    "@typescript-eslint/typescript-estree" "2.27.0"
-    eslint-scope "^5.0.0"
-    eslint-utils "^2.0.0"
-
 "@typescript-eslint/experimental-utils@2.28.0", "@typescript-eslint/experimental-utils@^2.5.0":
   version "2.28.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.28.0.tgz#1fd0961cd8ef6522687b4c562647da6e71f8833d"
@@ -979,19 +969,6 @@
     "@typescript-eslint/typescript-estree" "2.28.0"
     eslint-visitor-keys "^1.1.0"
 
-"@typescript-eslint/typescript-estree@2.27.0":
-  version "2.27.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.27.0.tgz#a288e54605412da8b81f1660b56c8b2e42966ce8"
-  integrity sha512-t2miCCJIb/FU8yArjAvxllxbTiyNqaXJag7UOpB5DVoM3+xnjeOngtqlJkLRnMtzaRcJhe3CIR9RmL40omubhg==
-  dependencies:
-    debug "^4.1.1"
-    eslint-visitor-keys "^1.1.0"
-    glob "^7.1.6"
-    is-glob "^4.0.1"
-    lodash "^4.17.15"
-    semver "^6.3.0"
-    tsutils "^3.17.1"
-
 "@typescript-eslint/typescript-estree@2.28.0":
   version "2.28.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.28.0.tgz#d34949099ff81092c36dc275b6a1ea580729ba00"