How to wrap root Frontity in Auth0? and not theme's index.js

I keep getting,
"You forgot to wrap your component in “’<’ Auth0Provider ‘>’”

I am using Mars theme, I have wrapped my Mars theme in Auth0Provider but there’s id=“root”, I can’t find this root div,

Only thing I can find is:
roots: {“theme: Theme”}

So, please tell me how to wrap complete Frontity with ?


!
Thank you.

I want to ship my code for production guys help… HOW TO WRAP FRONTITY IN AUTH0???

Hi @furrysmile2

I’m not sure that you’ve given me enough information to fully understand the issue that you’re having. Do you have a repo that I can clone? Having access to your code will help me see the code snippets you provide in context and allow me to try out some theories and/or experiments.

Hey thanks for the response, my issue is very simple.

I would like to add Auth0 component tag (root level) and put complete Frontity inside this tag.

I just realized I added wrong screenshot of class “root”.

I have wrapped Frontity index.js in Auth0Provider component but where is the frontity component which return’s and theme’s index.js…

To Reproduce the error:
Just install import { Auth0Provider, useAuth0 } from “@auth0/auth0-react”;
go to Mars theme index.js file, wrap all your components with Auth0Provider with domain, clientid, redirectUri and check console for this error:

ref:


Where is this in frontity, so I can wrap it with my Auth0 component,

like

Hi @furrysmile2

I followed your instructions:

But I’m not able to reproduce the error. I don’t get the error message "You forgot to wrap your component in <Auth0Provider> and my Frontity app continues working normally.

A repo would be helpful to see what else you might be doing in your code.

If you are not getting that error can I see your repo? I will fix it

Sure, here you go: https://github.com/mburridge/frontity-cs2556

Hope it helps.

Thanks, please see this https://github.com/mburridge/frontity-cs2556/pull/1/files , you’ll get the error when you access tokens.

Hi @furrysmile2

I guess you know this already but you’re getting the error because the try statement is failing and the catch is being executed instead. This will obviously fail with the domain test.frontity.org because the requested data is not being returned.

I think you need to figure out how your server is responding to these authentication requests.

BTW, and I’m guessing this is just an error in the PR you submitted, but you’ve set:

23  const domain ="https://test.frontity.org/";

and then gone on to use it thus:

27  audience: `https://${domain}/api/v2/`,
31  const userDetailsByIdUrl = `https://${domain}/api/v2/users/${user.sub}`;

so the first line, for example, resolves to:

audience: `https://https://test.frontity.org//api/v2/`,

which is clearly an invalid address.

Ah sorry, I removed my domain and added your frontity for just example, my real code looks like this

Even if you fix that, you’ll still get the "You forgot to wrap your component in <Auth0Provider>, which is what I’m trying to fix

No worries, I guessed that that was the case.

I think you’re going to have to figure out why the try is failing. The Frontity site appears to continue to work normally even with the <Auth0Provider> component so I don’t think it’s a Frontity problem. You will need to test what responses you’re getting back from the server in the fetch requests in the try statement, and you may need to read the @auth0/auth0-react documentation to understand what getAccessTokenSilently is doing.

There’s a number of things going on in the try statement so I guess you’ll need to figure out which part is causing the whole try to fail and the catch to execute.

Sorry I’m not able to help you further.