https://supertokens.com/ logo
Title
d

d3adb0y

12/15/2022, 7:28 PM
Hey all. First of all I want to say I'm so happy I found this project. Really amazing stuff. I have a stupid question. I am trying to implement SuperTokens into my React app. When I navigate to the /auth endpoint, the formatting seems like it is not configured correctly. Is this by design?
r

rp

12/16/2022, 2:42 AM
Hey @d3adb0y do you use emotion in your project?
d

d3adb0y

12/16/2022, 2:12 PM
Nope
r

rp

12/16/2022, 2:50 PM
Are you using vue?
Or are u using a dependency that uses emotion lib?
d

d3adb0y

12/16/2022, 2:51 PM
i am using React on the frontend. I don't believe I have any dependencies using emotion
r

rp

12/16/2022, 4:20 PM
Hmm. What does the browser console log say?
d

d3adb0y

12/16/2022, 4:44 PM
nothing logged in the console
just no styles are applied
r

rp

12/16/2022, 4:44 PM
perhaps @porcellus can help here.
p

porcellus

12/16/2022, 5:10 PM
hi
so is this a norma CRA app, or what's your setup like?
d

d3adb0y

12/16/2022, 5:11 PM
howdy
actually i am using Vite
as ive seen some recent posts in the React community advising people against using CRA
p

porcellus

12/16/2022, 5:14 PM
yeah, and I think they make good points. I don't like the kitchen-sink approach of CRA either.
I ask like that because it's still the most widely used.
d

d3adb0y

12/16/2022, 5:15 PM
its definitely much faster for starting the dev server 🙂
but yeah as stated im not seeing an errors being logged in the console. the SuperTokens auth redirect is working just no styles
p

porcellus

12/16/2022, 5:17 PM
d

d3adb0y

12/16/2022, 5:18 PM
that did the trick indeed
❤️
p

porcellus

12/16/2022, 5:19 PM
happy to help 🙂 I think you have something installed that messes with emotion
Hopefully we will drop that dependency fairly soon though 🙂
d

d3adb0y

12/16/2022, 5:20 PM
wouldnt surprise me. i committed to building a React frontend for the client now I'm trying to speed run relearning it lol.
fun times
also while i have you here can i get your input on another question i have?
p

porcellus

12/16/2022, 5:27 PM
sure
d

d3adb0y

12/16/2022, 5:28 PM
in all the react examples provided, the route element is wrapped with the SessionAuth component
is there a way I can just wrap all of my routes via SessionAuth so I don't need to provided nested elements for each route
the examples are super helpful though. i wish every project was as well documented as this 🙂
p

porcellus

12/16/2022, 5:35 PM
Sure. I'd recommend nested routing. How this works exactly depends on the router you use, but in general, you can have something like:
<Router>
  <Route path="/about" element={<div>....</div>} />
  <Route path="*" element={<SessionAuth>
      <Router> 
        <Route ... />
      </Router>
    </SessionAuth>} />
</Router>
d

d3adb0y

12/16/2022, 5:35 PM
okay that makes sense....sorry like I said I am a react nooblet
p

porcellus

12/16/2022, 5:36 PM
I'd have to think about this a bit more about how to add a catch-all in this case though
don't worry about it 🙂
Another way to do this is by defining a
ProtectedRoute
component that forwards all props to a route element and wraps the children with SessionAuth. I think this is a bit more readable, so this is what I'd prefer
d

d3adb0y

12/16/2022, 5:39 PM
yeah i think you're right. i have seen other react auth frameworks provide something similar. although i understand the balance of trying to keep the framework flexible as well.
p

porcellus

12/16/2022, 5:39 PM
yup. the issue with that we would be the dependent on the exact router which is something we don't want to do.