social-login | utility built on top of PassportJS that makes it a lot | Authentication library

In firebaseConfig.js use export default instead of export const.

And in src/components/SocialLogin.vue, use import firebaseApp from '../firebaseConfig.js'

The issue was in .haccess, I replaced it from:

Sounds like your is not work like Link in react-router-dom. Try:

Status code 0 in the error message indicates a CORS failure. You can go through this GitHub issue comment, where the stackoverflow thread points to a number of reasons for this error.

Also you need to write this line of code in your initialisations :

const cors = require('cors')({origin: true}) and check out Google’s documentation on how to handle CORS requests. Also you have to provide proper permissions - one of the important ones being giving Cloud Functions invoker role to your cloud functions.

Joe, (author of our question) agreed that it was a CORS error but he solved it by giving allUsers permission (making the function public) and verifying the user in the function itself and the CORS disappeared.

Now the reason behind this :

I think there was some issue with Joe’s authentication mechanism and hence functions were not authenticated. HTTP functions require authentication by default. And as it did not have it, as per documentation the workaround was to make Joe’s function public by setting the --allow-unauthenticated flag, or use the Console to grant the Cloud Functions Invoker role to allUsers. Then handle CORS and authentication in the function code (which he was doing as he mentioned).

So when Joe made the function public by granting allUsers and CORS was handled in code, it started working and the CORS errors disappeared.

After investigating a bit on my end, I think I might have a solution that works for you.

I've messed with OAuth before, and it's quite tricky sometimes because it has to be robust. So a bunch of security policies usually get in the way.

I'll provide my full step-by-step, since I was able to get it working, trying my best to match what you posted.

Firstly, to have a clean slate, I went off the example code linked in the tutorials. I cloned and built the project, and did the following:

• Creating a new project on GCP
  • Configured the OAuth consent screen
    • I set the User type to "internal". This options may not be available if you're not using an account under GSuite (which I am). "External" should be fine though, just that "internal" is the easiest to test.
  • Created a OAuth 2.0 Client
    • Added http://localhost:3000 to the "Authorized JavaScript origins" and "Authorized redirect URIs" sections
• Register a Django superuser
  • Registered a Site, with value of localhost:8000 for both fields.
  • Went into the admin panel, and added a Social Application with Client ID and Secret Key as the "Client ID" and "Client Secret" from GCP, respectively. I also picked the localhost site that we added earlier and added it to the right hand box. (I left Key blank)

Example of my Application Page

• Filled in the clientId field in App.js, in the params of the GoogleLogin component.

Here's where I ran into a bit of trouble, but this is good news as I was able to reproduce your error! Looking at the request in the network inspector, I see that for me, no body was passed, which is clearly the direct cause of the error. But looking at App#responseGoogle(response), it clearly should pass a token of some sort, because we see the line googleLogin(response.accessToken).

So what is happening is that accounts.google.com is NOT returning a proper response, so something is happening on their end, and we get an invalid response, but we fail silently because javascript is javascript.

After examining the response that Google gave back, I found this related SO post that allowed me to fix the issue, and interestingly, the solution to it was quite simple: Clear your cache. I'll be honest, I'm not exactly sure why this works, but I suspect it has something to do with the fact that development is on your local machine (localhost/127.0.0.1 difference, perhaps?).

You can also try to access your site via incognito mode, or another browser, which also worked for me.

I have knox token set up, can I use it instead of the JWT tokens?

I don't think I have enough knowledge to properly answer this, but my preliminary research suggests no. AFAIK, you should just store the token that Google gives you, as the token itself is what you'll use to authenticate. It seems that Knox replaces Django's TokenAuthentication, which means that Knox is in charge of generating the token. If you're offloading the login work to Google, I don't see how you could leverage something like Knox. However, I could be very wrong.

Does the class GoogleLogin(SocialLoginView), take care of the steps of validating the access token and code with google and creating the user with that email in database?

I believe so. After successfully authenticating with Google (and it calls the backend endpoint correctly), it seems to create a "Social Account" model. An example of what it created for me is below. It retrieved all this information (like my name) from Google.

Example of my "Social Accounts" page

As for how to retrieve the login from the browser's local storage, I have no idea. I see no evidence of a cookie, so it must be storing it somewhere else, or you might have to set that up yourself (with React Providers, Services, or even Redux.

Normally the ionic serve command use the app name as app, so that might be the problem.

Under the hood that command runs ng run app:serve --host=localhost --port=8100, so you can try to map it into the package.json as a custom script with your app name.

I'm struggling to understand the equivalent of the react router functionalities with v6 (location.state.error, history.replace, location.pathname etc) and functional components instead of class based.

In react-router-dom v6 there are no longer route props, i.e. no history, location, and no match. The Route components also no longer have component or render props that take a reference to a React component or a function that returns JSX, instead they were replaced by the element prop that takes a JSX literal, i.e. ReactElement.

If I'm understanding your question(s) correctly you are asking how to use RRDv6 with the class components Login and Signup.

You've a couple options:

1. Convert Login and Signup into React function components as well and use the new React hooks.

   I won't cover the conversion, but the hooks to use are:

   • useNavigate - history object was replaced by a navigate function.

You need a take(1) before your map, to get the latest value of this.authService.authState i.e.: