Initial commit

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.eslintrc

@@ -0,0 +1,17 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["unused-imports", "@typescript-eslint", "prettier"],
+  "rules": {
+    "prettier/prettier": "error",
+    "unused-imports/no-unused-imports": "error",
+    "no-unused-vars": [
+      "error",
+      {
+        "vars": "all",
+        "varsIgnorePattern": "^_",
+        "args": "after-used",
+        "argsIgnorePattern": "^_"
+      }
+    ]
+  }
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

README.md

@@ -0,0 +1,175 @@
+# React Auth
+
+OAuth2 + OpenID connect client library for React with support for authorization code flow with PKCE.
+
+## Getting Started
+1. Wrap your application in an AuthProvider with the config of your auth server. You can optionally include an AuthGuard which prevents unauthenticated access to any page on your app expect for those explicitly listed.
+
+```tsx
+// pages/_app.tsx
+export type ChildrenProp = { children: ReactNode }
+
+const AdminAuth: React.FC<ChildrenProp> = ({ children }) => {
+  const router = useRouter()
+
+  const appUrl = process.env.NEXT_PUBLIC_APP_URL
+  const tenantId = process.env.NEXT_PUBLIC_TENANT_ID
+
+  const baseAuthUri = `https://login.microsoftonline.com/${tenantId}/oauth2/v2.0`
+
+  return (
+    <AuthProvider
+      endpoints={{
+        authorizationEndpoint: `${baseAuthUri}/authorize`,
+        tokenEndpoint: `${baseAuthUri}/token`,
+      }}
+      clientId={process.env.NEXT_PUBLIC_CLIENT_ID as string}
+      redirectUri={`${appUrl}/login/callback`}
+      logoutRedirectUri={`${baseAuthUri}/logout?post_logout_redirect_uri=${appUrl}/logout/success`}
+      scope={`openid profile email offline_access YOUR_CUSTOM_SCOPES`}
+      cacheStrategy="localStorage"
+    >
+      <AuthGuard
+        whitelistedPaths={['/login', '/login/callback', '/logout/success', '/logout']}
+        currentPathName={router.pathname}
+      >
+        {children}
+      </AuthGuard>
+    </AuthProvider>
+  )
+}
+```
+*This example uses Next.js as a React framework and Azure AD as the OAuth server, but the same pattern applies regardless of Next.js or OAuth server.*
+
+2. Create your /login/callback page to handle exchanging the authorization code for an access token.
+```tsx
+// pages/login/callback.tsx
+const AuthCallback: React.FC = () => {
+  const callbackError = useAuthCallback()
+  const { redirectToLogin } = useAuth()
+
+  if (!callbackError) {
+    return null
+  }
+
+  return (
+    <p>
+      Login error - {callbackError.error} - {callbackError.errorDescription}
+      <button type="button" onClick={() => redirectToLogin()}>
+        Login
+      </button>
+    </p>
+  )
+}
+
+export default AuthCallback
+```
+
+The `useAuthCallback()` hook will automatically look for the authorization code in the URL, exchange it for an access token, and redirect the user to their original destination.
+
+3. Create a logout success page that the user should be redirected to once they've successfully logged out.
+```tsx
+const LogoutSuccess: React.FC = () => {
+  const { isAuthenticated, isLoading } = useAuth()
+  const router = useRouter()
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      router.push('/')
+    }
+  }, [isAuthenticated, router])
+
+  if (!isLoading && !isAuthenticated) {
+    return (
+      <p>You've been logged out!</p>
+    )
+  }
+
+  return null
+}
+```
+
+4. The user is successfully authenticated! You can retrieve the access token by invoking the `getAccessTokenSilently()` function returned by the `useAuth()` hook.
+
+Example using Apollo Client:
+```tsx
+export const AuthorizedApolloProvider: React.FC<Props> = ({ children }) => {
+  const { isAuthenticated, getAccessTokenSilently } = useAuth()
+  const client = useMemo(() => {
+    const httpLink = createHttpLink({
+      uri: process.env.NEXT_PUBLIC_GRAPHQL_URL,
+    })
+
+    const authLink = setContext(async () => {
+      if (!isAuthenticated) {
+        return {}
+      }
+
+      const token = await getAccessTokenSilently()
+      return {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    })
+
+    return new ApolloClient({
+      link: authLink.concat(httpLink),
+      cache: new InMemoryCache(),
+    })
+  }, [isAuthenticated, getAccessTokenSilently])
+
+  return <ApolloProvider client={client}>{children}</ApolloProvider>
+}
+```
+
+4. Optionally setup /login and /logout pages that redirects the user into the appropriate login/logout flows.
+```tsx
+// pages/login/index.tsx
+const Login: React.FC = () => {
+  const { isAuthenticated, redirectToLogin, isLoading } = useAuth()
+  const router = useRouter()
+
+  useEffect(() => {
+    ;(async () => {
+      if (isLoading) {
+        return
+      }
+
+      if (isAuthenticated) {
+        await router.push('/')
+        return
+      }
+
+      await redirectToLogin()
+    })()
+  }, [isAuthenticated, isLoading, redirectToLogin, router])
+
+  return null
+}
+```
+
+```tsx
+// pages/logout/index.tsx
+const Logout: React.FC = () => {
+  const { isAuthenticated, redirectToLogout, isLoading } = useAuth()
+  const router = useRouter()
+
+  useEffect(() => {
+    ;(async () => {
+      if (isLoading) {
+        return
+      }
+
+      if (isAuthenticated) {
+        await redirectToLogout()
+        return
+      }
+
+      await router.push('/logout/success')
+    })()
+  }, [isAuthenticated, isLoading, redirectToLogout, router])
+
+  return null
+}
+```

package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@headstorm/react-auth",
+  "version": "1.0.0",
+  "description": "OAuth2 + OpenID connect client library for React with support for authorization code flow with PKCE",
+  "main": "dist/react-auth.min.js",
+  "types": "dist/react-auth.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Headstorm/react-auth.git"
+  },
+  "author": "Headstorm",
+  "license": "MIT",
+  "scripts": {
+    "prepack": "npm run rollup",
+    "rollup": "rollup -c"
+  },
+  "files": [
+    "dist/**/*"
+  ],
+  "devDependencies": {
+    "@types/react": "^17.0.19",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-unused-imports": "^1.1.4",
+    "prettier": "^2.3.2",
+    "prettier-plugin-organize-imports": "^2.3.3",
+    "rollup": "^2.56.2",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-dts": "^3.0.2",
+    "rollup-plugin-json": "^4.0.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-sourcemaps": "^0.6.3",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.30.0",
+    "typescript": "^4.3.5"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2"
+  },
+  "dependencies": {
+    "nanoid": "^3.1.25"
+  },
+  "bugs": {
+    "url": "https://github.com/Headstorm/react-auth/issues"
+  },
+  "homepage": "https://github.com/Headstorm/react-auth#readme"
+}

rollup.config.ts

@@ -0,0 +1,67 @@
+import { defineConfig } from 'rollup'
+import commonjs from 'rollup-plugin-commonjs'
+import del from 'rollup-plugin-delete'
+import dts from 'rollup-plugin-dts'
+import json from 'rollup-plugin-json'
+import resolve from 'rollup-plugin-node-resolve'
+import sourceMaps from 'rollup-plugin-sourcemaps'
+import { terser } from 'rollup-plugin-terser'
+import typescript from 'rollup-plugin-typescript2'
+
+export default defineConfig([
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: 'dist/react-auth.min.js',
+        name: 'reactAuth',
+        format: 'umd',
+        sourcemap: true,
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          crypto: 'crypto',
+        },
+      },
+    ],
+    external: ['react', 'crypto'],
+    watch: {
+      include: 'src/**',
+    },
+    plugins: [
+      del({ targets: 'dist/*', runOnce: true }),
+      // Allow json resolution
+      json(),
+      // Compile TypeScript files
+      typescript({ useTsconfigDeclarationDir: true }),
+      // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
+      commonjs(),
+      // Allow node_modules resolution, so you can use 'external' to control
+      // which external modules to include in the bundle
+      // https://github.com/rollup/rollup-plugin-node-resolve#usage
+      resolve(),
+
+      // Resolve source maps to the original source
+      sourceMaps(),
+      // Minify output
+      terser(),
+    ],
+  },
+  {
+    input: './dist/index.d.ts',
+    output: [{ file: 'dist/react-auth.d.ts', format: 'es' }],
+    plugins: [
+      dts(),
+      del({
+        targets: 'dist/*',
+        ignore: [
+          'dist/react-auth.d.ts',
+          'dist/react-auth.min.js',
+          'dist/react-auth.min.js.map',
+        ],
+        runOnce: true,
+        hook: 'buildEnd',
+      }),
+    ],
+  },
+])

src/auth-guard.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import { ChildrenProp } from './types/children-prop'
+import { useAuth } from './use-auth'
+
+type Props = {
+  whitelistedPaths: string[]
+  currentPathName: string
+} & ChildrenProp
+
+export const AuthGuard: React.FC<Props> = ({
+  whitelistedPaths,
+  currentPathName,
+  children,
+}) => {
+  const { isAuthenticated, isLoading, redirectToLogin } = useAuth()
+  const [isPathAllowed, setIsPathAllowed] = useState(isAuthenticated)
+
+  const sanitizedWhitelistedPaths = useMemo(() => {
+    return whitelistedPaths.map(sanitizePath)
+  }, [whitelistedPaths])
+
+  useEffect(() => {
+    const pathName = sanitizePath(currentPathName)
+    if (isAuthenticated || sanitizedWhitelistedPaths.includes(pathName)) {
+      setIsPathAllowed(true)
+      return
+    }
+
+    if (!isLoading) {
+      ;(async () => await redirectToLogin())()
+    }
+  }, [
+    isAuthenticated,
+    isLoading,
+    redirectToLogin,
+    sanitizedWhitelistedPaths,
+    currentPathName,
+  ])
+
+  if (!isPathAllowed) {
+    return null
+  }
+
+  return <>{children}</>
+}
+
+function stripBeginningSlash(path: string): string {
+  return path.startsWith('/') ? path.substr(1) : path
+}
+
+function sanitizePath(path: string): string {
+  return stripBeginningSlash(path).toLowerCase()
+}