From 029edcb8852ac4651ff5d3e525c437b2c2ef021a Mon Sep 17 00:00:00 2001 From: Adam Mcgrath Date: Fri, 8 May 2020 14:23:33 +0100 Subject: [PATCH] Release 0.1.0 (#8) * Release 0.1.0 --- .prettierignore | 1 + CHANGELOG.md | 13 ++++++ README.md | 86 +++++++++++++++++++++++++++++++++-- __tests__/with-auth0.test.tsx | 4 +- package-lock.json | 2 +- package.json | 5 +- src/auth0-provider.tsx | 5 +- src/index.tsx | 8 +++- src/with-auth0.tsx | 6 +-- 9 files changed, 114 insertions(+), 16 deletions(-) create mode 100644 .prettierignore create mode 100644 CHANGELOG.md diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..1b763b1b --- /dev/null +++ b/.prettierignore @@ -0,0 +1 @@ +CHANGELOG.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 00000000..fc278b91 --- /dev/null +++ b/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)) diff --git a/README.md b/README.md index 24100635..880edcf1 100644 --- a/README.md +++ b/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( Hello {user.name}; + } +} + +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 = () =>
Private
; + +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
Loading...
; + } + + return ( + + ); +}; + +export default Posts; +``` + ## Contributing We appreciate feedback and contribution to this repo! Before you get started, please see the following: diff --git a/__tests__/with-auth0.test.tsx b/__tests__/with-auth0.test.tsx index abc8d2d1..caf1694a 100644 --- a/__tests__/with-auth0.test.tsx +++ b/__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 { + class MyComponent extends Component { render(): JSX.Element { return <>hasAuth: {`${!!this.props.auth}`}; } diff --git a/package-lock.json b/package-lock.json index d9bb4028..3b646596 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@auth0/auth0-react", - "version": "0.0.0", + "version": "0.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 318ec46d..f44a93d7 100644 --- a/package.json +++ b/package.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", diff --git a/src/auth0-provider.tsx b/src/auth0-provider.tsx index faea7609..0e999c3c 100644 --- a/src/auth0-provider.tsx +++ b/src/auth0-provider.tsx @@ -10,7 +10,8 @@ import { AppState, defaultOnRedirectCallback, hasAuthParams } from './utils'; import { reducer } from './reducer'; import { initialAuthState } from './auth-state'; -interface AuthProviderOptions extends PropsWithChildren { +export interface Auth0ProviderOptions + extends PropsWithChildren { onRedirectCallback?: (appState: AppState) => void; } @@ -18,7 +19,7 @@ const Auth0Provider = ({ children, onRedirectCallback = defaultOnRedirectCallback, ...opts -}: AuthProviderOptions): JSX.Element => { +}: Auth0ProviderOptions): JSX.Element => { const [client] = useState(() => new Auth0Client(opts)); const [state, dispatch] = useReducer(reducer, initialAuthState); diff --git a/src/index.tsx b/src/index.tsx index 7d83c60a..ea9a9d77 100644 --- a/src/index.tsx +++ b/src/index.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'; diff --git a/src/with-auth0.tsx b/src/with-auth0.tsx index 4bd27b8e..2db1714e 100644 --- a/src/with-auth0.tsx +++ b/src/with-auth0.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 =

( +const withAuth0 =

( Component: ComponentType

-): ComponentType> => (props): JSX.Element => ( +): ComponentType> => (props): JSX.Element => ( {(auth: Auth0ContextInterface): JSX.Element => (