Looking for 8base React package recommendations

1

Hello, noob here looking for reliable React starter information.

I see an 8base React starter but it:

  • doesn’t have great documentation
  • uses 8base libraries that don’t have great documentation
  • uses dependency/ies that are no longer maintained (like recompose)
  • has 38k vulnerabilities (yeah, npm audit fix fixes most of them)
  • doesn’t use query cacheing (I don’t think?)
  • uses heavy 8base sdk
  • (and also doesn’t show how to do some core Graphql connection things.)

So my noob question to React developers is this: what do you use for your production web React apps?

Do you use any 8base sdks or no?
@8base/react-sdk, @8base/app-provider, @8base/api-client

What do you use for GraphQL client and cacheing?
apollo-boost, graphql-react, other?

What do you use for auth?
withAuth from @8base/react-sdk, auth0-js, other?

Do you use a similar routes/callback pattern as the starter does for auth?

Any Nextjs users out there? What do you use?
apollo-boost & graphql-react allow for both server- and client-side GraphQL cacheing yeah?

Thanks much!

2

Trying to do the same with this stack.
Have it somewhat working on RN Web but when i open in iOS it throws a super is not defined error.

import { AppProvider, useAuth } from ‘8base-react-sdk’;
import { Auth, AUTH_STRATEGIES } from ‘@8base/auth’;
import { ApolloClient, ApolloProvider, gql, InMemoryCache, useQuery } from ‘@apollo/client’;

3

I’m a NextJS user; I started trying to use the 8base SDK but backed away for the reasons you listed. In the end I just used the auth0-js package directly and wrote my own auth callback handler. It’s fairly trivial, but you’ll need to implement storage etc. I just write the token to localStorage, then load it back into Apollo on page mount.

4

I’m also a NextJS user, and I use 8base Auth with apollo-boost & react-apollo with hooks. It works beautifully!

5

Hey, thanks everyone for the feedback.

Yeah I’m finding a nice experience using this Nextjs official Nextjs + Apollo example with no 8base libraries. That starter seems to be pretty nice: server- and client-side graphql cacheing via Apollo (if you’re using Nextjs and server-side rendering. UPDATE: I may be wrong on the client-side GraphQL cacheing out of the box with that starter? But should be possible with some tweaks. Plus some other Apollo things like pulling out the “detail-level item” cache from the “list of items” cache and pre-fecthing.) THEN will add in auth.

For anyone else starting out with 8base, one suggested quickstart process:

  1. Put some public data in your 8base database.
  2. Use your Create React App / Nextjs / Gatsby / Vue / Nuxt / PHP / Rails / React Native or whatever framework + Apollo Boost or Apollo client and no 8base libraries and access that public data. The only 8base config = link to your 8base graphql api.
  3. Once that’s done, THEN, for auth, add roles & permissions on the data and consider adding 8base Auth or Auth0 or other auth service and its client sdk.
  4. Then dive into 8base CLI tool, serverless functions etc…
6

Requested access to read google docs.

7

Hi, sorry, I had posted the wrong link. I updated the link: it goes to the intended 8base community post with more info. Thanks.

8

How did you set up your authorization with NextJS and 8Base/Auth0? Did you do what @gcpantazis did above with auth-js and your own callback handler + local storage? Or something else. Thanks.

9

Having some trouble getting NextJS/Auth0/8Base setup

So if you just get the Token back from Auth0, it will work when you pass that to 8Base? I am not an expert in authorization but it seems like the token would somehow have to go through 8Base.

Also could you explain a little more what you had to do in the custom auth callback handler? Is it just getting the token from auth-js and then storing it on localStorage?

Thanks

10

@nzaleski have you had time to look at our docs? Some if these questions are answered in there. https://docs.8base.com/docs/8base-console/authentication

11

I often hear that storing JWT tokens in localstorage is extremely insecure and prone to XSS attack. And unless I’m mistaken, the official 8base React starter app also stores the Auth0 token in localstorage?

Or is this not a concern? Thoughts on this @gcpantazis and @sebastian.scholl? Thanks.

12

Hey @hello - you’re that that there are concerns around XSS attacks when storing idTokens in localStorage - regardless of it being an extremely widespread practice.

Nonetheless, an idToken does need a secure method of being stored on the user’s browser, which can be accomplished using HTTP Cookies (https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies).

13

Are there security best practices beyond just having an HTTP cookie? Does 8Base support refresh tokens or HttpOnly cookies that reduce the vulnerabilities of standard cookie-based approaches? Thanks!

14

hey Drew - we use JWTs which when issued by the auth provider can have an associated refresh token.