Release 0.1.0 (#8)

* Release 0.1.0

Author: adamjmcgrath

.prettierignore

@@ -0,0 +1 @@
+CHANGELOG.md

CHANGELOG.md

@@ -0,0 +1,13 @@
+# Change Log
+
+## [v0.1.0](https://github.com/auth0/auth0-react/tree/v0.1.0) (2020-05-08)
+
+**Added**
+
+- [SDK-1580][SDK-1581] Add withAuth and withLoginRequired [\#7](https://github.com/auth0/auth0-react/pull/7) ([adamjmcgrath](https://github.com/adamjmcgrath))
+- [SDK-1583] Setup basic README for Early Access [\#6](https://github.com/auth0/auth0-react/pull/6) ([adamjmcgrath](https://github.com/adamjmcgrath))
+- [SDK-1577][SDK-1578] Add login functionality [\#5](https://github.com/auth0/auth0-react/pull/5) ([adamjmcgrath](https://github.com/adamjmcgrath))
+- [SDK-1576] Linting [\#4](https://github.com/auth0/auth0-react/pull/4) ([adamjmcgrath](https://github.com/adamjmcgrath))
+- [SDK-1572] Added CircleCI config [\#3](https://github.com/auth0/auth0-react/pull/3) ([Widcket](https://github.com/Widcket))
+- [SDK-1568] Set up unit tests [\#2](https://github.com/auth0/auth0-react/pull/2) ([adamjmcgrath](https://github.com/adamjmcgrath))
+- [SDK-1570][SDK-1571] Setup dev environment and build targets [\#1](https://github.com/auth0/auth0-react/pull/1) ([adamjmcgrath](https://github.com/adamjmcgrath))

README.md

@@ -19,6 +19,7 @@ Auth0 SDK for React Applications.
 
 - [Installation](#installation)
 - [Getting Started](#getting-started)
+- [Advanced Use Cases](#advanced-use-cases)
 - [Contributing](#contributing)
 - [Support + Feedback](#support--feedback)
 - [Vulnerability Reporting](#vulnerability-reporting)
@@ -28,17 +29,19 @@ Auth0 SDK for React Applications.
 ## Installation
 
 ```bash
-npm install @auth0/auth0-spa-js auth0/auth0-react
+npm install @auth0/auth0-spa-js https://github.com/auth0/auth0-react/releases/download/0.1.0/auth0-auth0-react-js-0.1.0.tgz
 ```
 
 ## Getting Started
 
-```js
+Configure the SDK by wrapping your application in `Auth0Provider`:
+
+```jsx
 // src/index.js
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
 import { Auth0Provider } from '@auth0/auth0-react';
+import App from './App';
 
 ReactDOM.render(
   <Auth0Provider
@@ -52,7 +55,9 @@ ReactDOM.render(
 );
 ```
 
-```js
+Use the `useAuth0` hook in your components to access authentication state (`isLoading`, `isAuthenticated` and `user`) and authentication methods (`login` and `logout`):
+
+```jsx
 // src/App.js
 import React from 'react';
 import { useAuth0 } from '@auth0/auth0-react';
@@ -77,6 +82,79 @@ function App() {
 export default App;
 ```
 
+## Advanced Use Cases
+
+### Class Components
+
+Use the `withAuth0` higher order component to add the `auth` property to Class components:
+
+```jsx
+import React, { Component } from 'react';
+import { withAuth0 } from '@auth0/auth0-react';
+
+class Profile extends Component {
+  render() {
+    const { user } = this.props.auth;
+    return <div>Hello {user.name}</div>;
+  }
+}
+
+export default withAuth0(Profile);
+```
+
+### Protecting Routes
+
+Protect a route component using the `withLoginRequired` higher order component. Visits to this route when unauthenticated will redirect the user to the login page and back to this page after login:
+
+```jsx
+import React from 'react';
+import { withLoginRequired } from '@auth0/auth0-react';
+
+const PrivateRoute = () => <div>Private</div>;
+
+export default withLoginRequired(PrivateRoute);
+```
+
+### Access an API
+
+Use a protected API with an Access Token:
+
+```jsx
+import React, { useEffect, useState } from 'react';
+import { useAuth0 } from '@auth0/auth0-react';
+
+const Posts = () => {
+  const { getToken } = useAuth0();
+  const [posts, setPosts] = useState(null);
+
+  useEffect(() => {
+    (async () => {
+      const token = await getToken();
+      const response = await fetch('https://api.example.com/posts', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      setPosts(await response.json());
+    })();
+  }, [getToken]);
+
+  if (!posts) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <ul>
+      {posts.map((post, index) => {
+        return <li key={index}>{post}</li>;
+      })}
+    </ul>
+  );
+};
+
+export default Posts;
+```
+
 ## Contributing
 
 We appreciate feedback and contribution to this repo! Before you get started, please see the following:

__tests__/with-auth0.test.tsx

@@ -1,11 +1,11 @@
 import '@testing-library/jest-dom/extend-expect';
 import React, { Component } from 'react';
-import withAuth0, { WithAuthProps } from '../src/with-auth0';
+import withAuth0, { WithAuth0Props } from '../src/with-auth0';
 import { render, screen } from '@testing-library/react';
 
 describe('withAuth0', () => {
   it('should wrap a class component', () => {
-    class MyComponent extends Component<WithAuthProps> {
+    class MyComponent extends Component<WithAuth0Props> {
       render(): JSX.Element {
         return <>hasAuth: {`${!!this.props.auth}`}</>;
       }

package-lock.json

@@ -1,7 +1,7 @@
 {
   "author": "Auth0",
   "name": "@auth0/auth0-react",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "description": "Auth0 SDK for React applications",
   "keywords": [
     "auth0",
@@ -23,7 +23,8 @@
     "build": "npm run lint && rollup -c --environment NODE_ENV:production",
     "lint": "eslint --ext=tsx ./src ./__tests__",
     "start": "rollup -cw",
-    "test": "jest --coverage"
+    "test": "jest --coverage",
+    "prepack": "npm run test && npm run build"
   },
   "repository": {
     "type": "git",

package.json

@@ -10,15 +10,16 @@ import { AppState, defaultOnRedirectCallback, hasAuthParams } from './utils';
 import { reducer } from './reducer';
 import { initialAuthState } from './auth-state';
 
-interface AuthProviderOptions extends PropsWithChildren<Auth0ClientOptions> {
+export interface Auth0ProviderOptions
+  extends PropsWithChildren<Auth0ClientOptions> {
   onRedirectCallback?: (appState: AppState) => void;
 }
 
 const Auth0Provider = ({
   children,
   onRedirectCallback = defaultOnRedirectCallback,
   ...opts
-}: AuthProviderOptions): JSX.Element => {
+}: Auth0ProviderOptions): JSX.Element => {
   const [client] = useState(() => new Auth0Client(opts));
   const [state, dispatch] = useReducer(reducer, initialAuthState);
 

src/auth0-provider.tsx

@@ -1,4 +1,8 @@
-export { default as Auth0Provider } from './auth0-provider';
+export {
+  default as Auth0Provider,
+  Auth0ProviderOptions,
+} from './auth0-provider';
 export { default as useAuth0 } from './use-auth0';
-export { default as withAuth0 } from './with-auth0';
+export { default as withAuth0, WithAuth0Props } from './with-auth0';
 export { default as withLoginRequired } from './with-login-required';
+export { Auth0ContextInterface } from './auth0-context';

src/index.tsx

@@ -1,13 +1,13 @@
 import React, { ComponentType } from 'react';
 import Auth0Context, { Auth0ContextInterface } from './auth0-context';
 
-export interface WithAuthProps {
+export interface WithAuth0Props {
   auth: Auth0ContextInterface;
 }
 
-const withAuth0 = <P extends WithAuthProps>(
+const withAuth0 = <P extends WithAuth0Props>(
   Component: ComponentType<P>
-): ComponentType<Omit<P, keyof WithAuthProps>> => (props): JSX.Element => (
+): ComponentType<Omit<P, keyof WithAuth0Props>> => (props): JSX.Element => (
   <Auth0Context.Consumer>
     {(auth: Auth0ContextInterface): JSX.Element => (
       <Component auth={auth} {...(props as P)} />