feat: throw error if context accessed outside of provider

Author: soofstad

.gitignore

@@ -3,6 +3,7 @@ node_modules
 .vscode
 dist
 .idea
+.vscode
 log.txt
 /src/react-app-env.d.ts
 .env

README.md

@@ -28,7 +28,7 @@ Long version;
 ## Example
 
 ```tsx
-import { AuthContext, AuthProvider, TAuthConfig, TRefreshTokenExpiredEvent } from "react-oauth2-code-pkce"
+import { useAuthContext, AuthProvider, TAuthConfig, TRefreshTokenExpiredEvent } from "react-oauth2-code-pkce"
 
 const authConfig: TAuthConfig = {
   clientId: 'myClientID',
@@ -40,7 +40,7 @@ const authConfig: TAuthConfig = {
 }
 
 const UserInfo = (): JSX.Element => {
-    const {token, tokenData} = useContext<IAuthContext>(AuthContext)
+    const {token, tokenData} = useAuthContext()
 
     return <>
         <h4>Access Token</h4>
@@ -71,7 +71,7 @@ npm install react-oauth2-code-pkce
 
 ### IAuthContext values
 
-The object that's returned by `useContext(AuthContext)` provides these values;
+The object that's returned by `useAuthContext()` provides these values;
 
 ```typescript
 interface IAuthContext {
@@ -200,9 +200,8 @@ This can be solved by marking the module with `use client` and importing the com
 
 ```tsx
 'use client'
-import {useContext} from "react";
 import dynamic from 'next/dynamic'
-import {TAuthConfig,TRefreshTokenExpiredEvent, AuthContext} from 'react-oauth2-code-pkce'
+import {TAuthConfig, TRefreshTokenExpiredEvent, useAuthContext} from 'react-oauth2-code-pkce'
 
 const AuthProvider = dynamic(
     ()=> import("react-oauth2-code-pkce")

src/AuthContext.tsx

@@ -15,8 +15,11 @@ import type {
   TTokenResponse,
 } from './types'
 
+export const DEFAULT_CONTEXT_TOKEN = 'DEFAULT_CONTEXT_TOKEN'
+
+// TODO: Change to undefined context and update useAuthContext accordingly in v2
 export const AuthContext = createContext<IAuthContext>({
-  token: '',
+  token: DEFAULT_CONTEXT_TOKEN,
   login: () => null,
   logIn: () => null,
   logOut: () => null,

src/index.jsx

@@ -6,9 +6,10 @@
 // If you want to run the project locally you will need to update the authConfig object with your own auth provider
 // ##########################################
 
-import React, { useContext } from 'react'
+import React from 'react'
 import { createRoot } from 'react-dom/client'
-import { AuthContext, AuthProvider } from './AuthContext'
+import { AuthProvider } from './AuthContext'
+import { useAuthContext } from './useAuthContext'
 
 // Get auth provider info from "https://keycloak.ofstad.xyz/realms/master/.well-known/openid-configuration"
 /** @type {import('./types').TAuthConfig} */
@@ -31,7 +32,7 @@ const authConfig = {
 }
 
 function LoginInfo() {
-  const { tokenData, token, idTokenData, logIn, logOut, error, loginInProgress } = useContext(AuthContext)
+  const { tokenData, token, idTokenData, logIn, logOut, error, loginInProgress } = useAuthContext()
 
   if (loginInProgress) return null
   return (

src/index.ts

@@ -5,3 +5,4 @@ export type {
   TAuthConfig,
   TRefreshTokenExpiredEvent,
 } from './types'
+export { useAuthContext } from './useAuthContext'

src/useAuthContext.tsx

@@ -0,0 +1,11 @@
+import { useContext } from 'react'
+import { AuthContext, DEFAULT_CONTEXT_TOKEN } from './AuthContext'
+import type { IAuthContext } from './types'
+
+export function useAuthContext(): IAuthContext {
+  const ctx = useContext(AuthContext)
+  if (ctx.token === DEFAULT_CONTEXT_TOKEN) {
+    throw new Error('useAuthContext must be used within an AuthProvider')
+  }
+  return ctx
+}