8base_react_app_provider_auth0_graphql_setup.ts

1import React from 'react';
2import { AppProvider } from '@8base/react-app-provider';
3import { Auth, AUTH_STRATEGIES } from '@8base/auth';
4
5/**
6 * Replace these constants with your actual 8base 
7 * workspace and authentication details.
8 */
9const ENDPOINT_URL = 'https://api.8base.com/YOUR_WORKSPACE_ID';
10const AUTH_CLIENT_ID = 'YOUR_AUTH_CLIENT_ID';
11const AUTH_DOMAIN = 'YOUR_AUTH_DOMAIN';
12
13/**
14 * Configure the authentication strategy.
15 */
16const authClient = Auth.createClient({
17  strategy: AUTH_STRATEGIES.WEB_AUTH0,
18  settings: {
19    clientId: AUTH_CLIENT_ID,
20    domain: AUTH_DOMAIN,
21    redirectUri: `${window.location.origin}/auth/callback`,
22    logoutRedirectUri: `${window.location.origin}/logout`,
23  },
24});
25
26const App: React.FC = () => {
27  return (
28    <AppProvider uri={ENDPOINT_URL} authClient={authClient}>
29      {({ loading }) => {
30        if (loading) {
31          return <div>Loading...</div>;
32        }
33        return (
34          <div className="App">
35            <h1>Hello 8base!</h1>
36            <p>Your application is now connected to the 8base API.</p>
37          </div>
38        );
39      }}
40    </AppProvider>
41  );
42};
43
44export default App;