Rename loading to isLoading

.gitignore

@@ -61,7 +61,7 @@ typings/
 .yarn-integrity
 
 # dotenv environment variables file
-.env
+.env.local
 
 # Distribution directories
 dist/

EXAMPLES.md

@@ -61,9 +61,9 @@ Check the user's authentication state and log them in or out from the front end
 import { useUser } from '@auth0/nextjs-auth0';
 
 export default () => {
-  const { user, loading } = useUser();
+  const { user, isLoading } = useUser();
 
-  if (loading) return <div>Loading...</div>;
+  if (isLoading) return <div>Loading...</div>;
 
   if (user) {
     return (

README.md

@@ -104,9 +104,9 @@ Check whether a user is authenticated by checking that `user` has a value, and l
 import { useUser } from '@auth0/nextjs-auth0';
 
 export default () => {
-  const { user, loading } = useUser();
+  const { user, isLoading } = useUser();
 
-  if (loading) return <div>Loading...</div>;
+  if (isLoading) return <div>Loading...</div>;
 
   if (user) {
     return (

examples/basic-example/components/header.jsx

@@ -3,7 +3,7 @@ import Link from 'next/link';
 import { useUser } from '@auth0/nextjs-auth0';
 
 const Header = () => {
-  const { user, loading } = useUser();
+  const { user, isLoading } = useUser();
 
   return (
     <header>
@@ -19,7 +19,7 @@ const Header = () => {
               <a>Protected Page</a>
             </Link>
           </li>
-          {!loading &&
+          {!isLoading &&
             (user ? (
               <>
                 <li>

examples/basic-example/pages/index.jsx

@@ -4,15 +4,15 @@ import { useUser } from '@auth0/nextjs-auth0';
 import Layout from '../components/layout';
 
 export default function Home() {
-  const { user, loading } = useUser();
+  const { user, isLoading } = useUser();
 
   return (
     <Layout>
       <h1>Next.js and Auth0 Example</h1>
 
-      {loading && <p>Loading login info...</p>}
+      {isLoading && <p>Loading login info...</p>}
 
-      {!loading && !user && (
+      {!isLoading && !user && (
         <>
           <p>
             To test the login click in <i>Login</i>

examples/basic-example/pages/protected-page.jsx

@@ -4,15 +4,15 @@ import { useUser, withPageAuthRequired } from '@auth0/nextjs-auth0';
 import Layout from '../components/layout';
 
 export default function ProtectedPage() {
-  const { user, loading } = useUser();
+  const { user, isLoading } = useUser();
 
   return (
     <Layout>
       <h1>Protected Page</h1>
 
-      {loading && <p>Loading profile...</p>}
+      {isLoading && <p>Loading profile...</p>}
 
-      {!loading && user && (
+      {!isLoading && user && (
         <>
           <p>Profile:</p>
           <pre>{JSON.stringify(user, null, 2)}</pre>

examples/kitchen-sink-example/components/header.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link';
 import { useUser } from '@auth0/nextjs-auth0';
 
 const Header: React.FunctionComponent = () => {
-  const { user, loading } = useUser();
+  const { user, isLoading } = useUser();
 
   return (
     <header>
@@ -24,7 +24,7 @@ const Header: React.FunctionComponent = () => {
               <a>TV Shows</a>
             </Link>
           </li>
-          {!loading &&
+          {!isLoading &&
             (user ? (
               <>
                 <li>

examples/kitchen-sink-example/pages/index.tsx

@@ -4,15 +4,15 @@ import { useUser } from '@auth0/nextjs-auth0';
 import Layout from '../components/layout';
 
 export default function Home(): React.ReactElement {
-  const { user, loading } = useUser();
+  const { user, isLoading } = useUser();
 
   return (
     <Layout>
       <h1>Next.js and Auth0 Example</h1>
 
-      {loading && <p>Loading login info...</p>}
+      {isLoading && <p>Loading login info...</p>}
 
-      {!loading && !user && (
+      {!isLoading && !user && (
         <>
           <p>
             To test the login click in <i>Login</i>

examples/kitchen-sink-example/pages/profile.tsx

@@ -4,15 +4,15 @@ import { useUser, withPageAuthRequired } from '@auth0/nextjs-auth0';
 import Layout from '../components/layout';
 
 export default withPageAuthRequired(function Profile(): React.ReactElement {
-  const { user, loading } = useUser();
+  const { user, isLoading } = useUser();
 
   return (
     <Layout>
       <h1>Profile</h1>
 
-      {loading && <p>Loading profile...</p>}
+      {isLoading && <p>Loading profile...</p>}
 
-      {!loading && user && (
+      {!isLoading && user && (
         <>
           <p>Profile:</p>
           <pre id="profile">{JSON.stringify(user, null, 2)}</pre>

package.json

@@ -17,26 +17,26 @@
   },
   "scripts": {
     "clean": "rimraf dist",
-    "pretty": "prettier --write \"src/**/*.ts\" \"src/*.ts\"",
+    "pretty": "prettier --write \"src/**/*.{ts,tsx}\" \"src/*.ts\"",
     "lint": "eslint --fix --ext .ts ./src",
-    "build": "tsc -p tsconfig.build.json",
-    "build:test": "next build tests/fixtures/test-app",
-    "build:kitchen-sync": "npm run build --prefix=examples/kitchen-sync-example",
-    "build:examples": "npm run build:kitchen-sync",
-    "test": "jest tests --coverage --maxWorkers=10",
-    "test:watch": "jest --coverage --watch",
-    "prepublishOnly": "npm test && npm run lint",
-    "prepublish": "npm run build",
     "docs": "typedoc --options typedoc.js src",
+    "prepublish": "npm run build",
+    "prepublishOnly": "npm test && npm run lint",
     "install:examples": "npm i --prefix=examples/basic-example --no-package-lock && npm i --prefix=examples/kitchen-sink-example --no-package-lock",
+    "build": "tsc -p tsconfig.build.json",
+    "build:test": "next build tests/fixtures/test-app",
+    "build:kitchen-sink": "npm run build --prefix=examples/kitchen-sink-example",
+    "build:examples": "npm run build:kitchen-sink",
+    "build:vercel": "npm run install:examples && npm run build && npm run build:examples",
     "start:basic": "npm run dev --prefix=examples/basic-example",
     "start:kitchen-sink": "npm run dev --prefix=examples/kitchen-sink-example",
+    "test": "jest tests --coverage --maxWorkers=10",
+    "test:watch": "jest --coverage --watch",
     "test:kitchen-sink": "start-server-and-test start:kitchen-sink http-get://localhost:3000 cypress:run",
     "test:kitchen-sink:watch": "start-server-and-test start:kitchen-sink 3000 cypress:open",
     "test:integration": "npm run test:kitchen-sink",
     "cypress:run": "cypress run",
-    "cypress:open": "cypress open",
-    "build:vercel": "npm run install:examples && npm run build && npm run build:examples"
+    "cypress:open": "cypress open"
   },
   "repository": {
     "type": "git",

src/frontend/use-user.tsx

@@ -23,7 +23,7 @@ export interface UserProfile {
  */
 export interface UserContext {
   user?: UserProfile;
-  loading: boolean;
+  isLoading: boolean;
 }
 
 /**
@@ -63,7 +63,7 @@ type UserProviderProps = React.PropsWithChildren<{ user?: UserProfile; profileUr
 /**
  * @ignore
  */
-const User = createContext<UserContext>({ loading: false });
+const User = createContext<UserContext>({ isLoading: false });
 
 /**
  * The `useUser` hook, which will get you the {@link UserProfile} object from the server side session by requesting it
@@ -75,9 +75,9 @@ const User = createContext<UserContext>({ loading: false });
  * import { useUser } from '@auth0/nextjs-auth0`;
  *
  * export default function Profile() {
- *   const { loading, user } = useUser();
+ *   const { user, isLoading } = useUser();
  *
- *   if (loading) return <div>Loading...</div>;
+ *   if (isLoading) return <div>Loading...</div>;
  *   if (!user) return <Link href="/api/auth/login"><a>Login</a></Link>;
  *   return <div>Hello {user.name}, <Link href="/api/auth/logout"><a>Logout</a></Link></div>;
  * }
@@ -105,7 +105,7 @@ export default ({
   profileUrl = '/api/auth/me'
 }: UserProviderProps): ReactElement<UserContext> => {
   const [user, setUser] = useState<UserProfile | undefined>(() => initialUser);
-  const [loading, setLoading] = useState<boolean>(() => !initialUser);
+  const [isLoading, setIsLoading] = useState<boolean>(() => !initialUser);
 
   useEffect((): void => {
     if (user) return;
@@ -115,9 +115,9 @@ export default ({
       const result = response.ok ? await response.json() : undefined;
 
       setUser(result);
-      setLoading(false);
+      setIsLoading(false);
     })();
   }, [user]);
 
-  return <User.Provider value={{ user, loading }}>{children}</User.Provider>;
+  return <User.Provider value={{ user, isLoading }}>{children}</User.Provider>;
 };

src/frontend/with-page-auth-required.tsx

@@ -67,15 +67,15 @@ const withPageAuthRequired: WithPageAuthRequired = (Component, options = {}) =>
   return function withPageAuthRequired(props): JSX.Element {
     const router = useRouter();
     const { returnTo = router.asPath, onRedirecting = defaultOnRedirecting, loginUrl = '/api/auth/login' } = options;
-    const { user, loading } = useUser();
+    const { user, isLoading } = useUser();
 
     useEffect(() => {
-      if (user || loading) return;
+      if (user || isLoading) return;
 
       (async (): Promise<void> => {
         await router.push(`${loginUrl}?returnTo=${returnTo}`);
       })();
-    }, [user, loading, router, loginUrl, returnTo]);
+    }, [user, isLoading, router, loginUrl, returnTo]);
 
     return user ? <Component {...props} /> : onRedirecting();
   };

tests/frontend/use-user.test.tsx

@@ -8,7 +8,7 @@ describe('context wrapper', () => {
     const { result } = renderHook(() => useUser(), { wrapper: withUser(user) });
 
     expect(result.current.user).toEqual(user);
-    expect(result.current.loading).toEqual(false);
+    expect(result.current.isLoading).toEqual(false);
   });
 
   test('should fetch the user', async () => {
@@ -17,12 +17,12 @@ describe('context wrapper', () => {
     const { result, waitForValueToChange } = renderHook(() => useUser(), { wrapper: withUser() });
 
     expect(result.current.user).toEqual(undefined);
-    expect(result.current.loading).toEqual(true);
+    expect(result.current.isLoading).toEqual(true);
 
-    await waitForValueToChange(() => result.current.loading);
+    await waitForValueToChange(() => result.current.isLoading);
 
     expect(result.current.user).toEqual(user);
-    expect(result.current.loading).toEqual(false);
+    expect(result.current.isLoading).toEqual(false);
   });
 
   test('should fail to fetch the user', async () => {
@@ -31,12 +31,12 @@ describe('context wrapper', () => {
     const { result, waitForValueToChange } = renderHook(() => useUser(), { wrapper: withUser() });
 
     expect(result.current.user).toEqual(undefined);
-    expect(result.current.loading).toEqual(true);
+    expect(result.current.isLoading).toEqual(true);
 
-    await waitForValueToChange(() => result.current.loading);
+    await waitForValueToChange(() => result.current.isLoading);
 
     expect(result.current.user).toEqual(undefined);
-    expect(result.current.loading).toEqual(false);
+    expect(result.current.isLoading).toEqual(false);
   });
 
   afterAll(() => {