fix(react-auth): fix endless react redirect on page load

tenseijs · Jul 22, 2021 · c85f470 · c85f470
1 parent 73d1a61
commit c85f470
Show file tree

Hide file tree

Showing 2 changed files with 213 additions and 184 deletions.
diff --git a/examples/react-parcel/src/App.tsx b/examples/react-parcel/src/App.tsx
@@ -2,101 +2,118 @@ import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import { createBrowserHistory } from 'history'
 import { Router, Route, Link } from 'react-router-dom'
-import { TenseiAuthProvider, useAuth, useTensei, MustBeAuthenticated, MustBeNotAuthenticated } from '@tensei/react-auth'
+import {
+  TenseiAuthProvider,
+  useAuth,
+  useTensei,
+  MustBeAuthenticated,
+  MustBeNotAuthenticated
+} from '@tensei/react-auth'
 
 export const history = createBrowserHistory()
 
 const onRedirectCallback = (path: string) => history.replace(path)
 
 const LoginPage: React.FunctionComponent = () => {
-    const tensei = useTensei()
-
-    const login = () => {
-        tensei.auth().login({
-            object: {
-                email: 'parcel@tenseijs.com',
-                password: 'password',
-                accepted_terms_and_conditions: true
-            }
-        })
-    }
-
-    const onSubmit = (event: any) => {
-        event.preventDefault()
-
-        const [email, password] = event.target.elements
-
-        tensei.auth().login({
-            object: {
-                email: email.value,
-                password: password.value
-            }
-        })
-    }
-
-    return (
-        <div>
-            <form onSubmit={onSubmit}>
-                <input type="text" name="email" placeholder="email" />
-                <input type="text" name="password" placeholder="password" />
-
-                <br />
-                <button>login to your account</button>
-            </form> 
-
-            <br />
-            <br />
-            <a href={tensei.auth().socialRedirectUrl('google')}>
-                Login with google
-            </a>
-        </div>
-    )
-}
+  const tensei = useTensei()
+
+  const onSubmit = (event: any) => {
+    event.preventDefault()
+
+    const [email, password] = event.target.elements
+
+    tensei.auth().register({
+      object: {
+        email: email.value,
+        password: password.value,
+        accepted_terms_and_conditions: true
+      }
+    })
+  }
+
+  return (
+    <div>
+      <form onSubmit={onSubmit}>
+        <input
+          type="text"
+          name="email"
+          placeholder="email"
+          defaultValue={`parcel+${Math.ceil(
+            Math.random() * 5000
+          )}@tenseijs.com`}
+        />
+        <input
+          type="text"
+          name="password"
+          placeholder="password"
+          defaultValue={`password`}
+        />
 
-const DashboardPage: React.FunctionComponent = () => {
-    const { user } = useAuth()
-    const tensei = useTensei()
+        <br />
+        <button>login to your account</button>
+      </form>
 
-    const logout = () => {
-        tensei.auth().logout()
-    }
+      <br />
+      <br />
+      <a href={tensei.auth().socialRedirectUrl('google')}>Login with google</a>
+    </div>
+  )
+}
 
-    return <div>
-        <h1>Welcome to your dashboard, {user?.email}</h1>
-        <br />
-        <br />
-        <button onClick={logout}>Logout</button>
+const DashboardPage: React.FunctionComponent = () => {
+  const { user } = useAuth()
+  const tensei = useTensei()
+
+  const logout = () => {
+    tensei.auth().logout()
+  }
+
+  return (
+    <div>
+      <h1>Welcome to your dashboard, {user?.email}</h1>
+      <br />
+      <br />
+      <button onClick={logout}>Logout</button>
     </div>
+  )
 }
 
 const WelcomePage: React.FunctionComponent = () => {
-    return (
-        <>
-            <h1>Welcome to our website.</h1>
-            <br />
-
-            <Link to='/auth/login'>Login to our app</Link>
-            <br />
-            <Link to='/dashboard'>Attempt to go to dashboard</Link>
-        </>
-    )
+  return (
+    <>
+      <h1>Welcome to our website.</h1>
+      <br />
+
+      <Link to="/auth/login">Login to our app</Link>
+      <br />
+      <Link to="/dashboard">Attempt to go to dashboard</Link>
+    </>
+  )
 }
 
 const App: React.FunctionComponent = () => {
-    return (
-        <TenseiAuthProvider options={{
-            refreshTokens: true
-        }} onRedirectCallback={onRedirectCallback}>
-            <Router history={history}>
-                <Route component={WelcomePage} path='/' exact />
-                <Route component={MustBeNotAuthenticated(LoginPage)} path='/auth/login' />
-                <Route component={MustBeAuthenticated(DashboardPage)} path='/dashboard' exact />
-            </Router>
-        </TenseiAuthProvider>
-    )
+  return (
+    <TenseiAuthProvider
+      options={{
+        refreshTokens: true
+      }}
+      Loader={() => <h1>LOADING AUTHENTICATED USER</h1>}
+      // onRedirectCallback={onRedirectCallback}
+    >
+      <Router history={history}>
+        <Route component={WelcomePage} path="/" exact />
+        <Route
+          component={MustBeNotAuthenticated(LoginPage)}
+          path="/auth/login"
+        />
+        <Route
+          component={MustBeAuthenticated(DashboardPage)}
+          path="/dashboard"
+          exact
+        />
+      </Router>
+    </TenseiAuthProvider>
+  )
 }
 
-ReactDOM.render(
-    <App />,
-    document.getElementById('app')
-)
+ReactDOM.render(<App />, document.getElementById('app'))