Authenticating user with social provider doesn't seem to work

[katab]

Hey everyone,

I have created a React SPA where I want to login using a social provider. I have created a Login component that is located within a Navbar component where I do the API fetch. But for some reason, I can’t get it to work. I got a CORS policy error. So I added the ‘no-cors’ mode to disabled it. When I test again, nothing happens at all. Strange thing is, if I copy-paste the API fetch link directly into my browser and then run it, I can sign in with google which takes me to my home page.

Here is the code below where I do the fetching:
Note that I didn’t mention DOMAIN_NAME en client_id for safety reasons.

function NavBar() {
    const authURL = `DOMAIN_NAME/authorize`;
    const query_param = {
        response_type: "token",
        client_id: "xxxx",
        connection: "google-oauth2",
        redirect_uri: "http://localhost:3000/",
        state: "123"
    };

    const OAuth = `${authURL}?response_type=${query_param.response_type}&client_id=${query_param.client_id}&connection=${query_param.connection}&redirect_uri=${query_param.redirect_uri}&state=${query_param.state}`;

    function authorizeLogin() {

        fetch(OAuth, {
            method: 'GET',
            mode: 'no-cors'
        });
    }
    return (
        <div>
                <Login click={() => authorizeLogin()} />
        </div>
    );
};

Thanks in advance!

[dan.woda]

Hi @katab,

Welcome to the Community!

I am not sure the exact error here, but have you considered using one of our SDKs? It will help to simplify the process.

This is our SPA js sdk:
https://auth0.com/docs/libraries/auth0-spa-js

And we recently released a react specific SDK in a public beta:

New React SDK Beta Available!

Fantastic news, we have a new open beta SDK for React applications! This new SDK provides a of hook and higher-order components to make integration into your React application easier, such as useAuth0 for performing authentication, withAuthenticationRequired for protecting routes and withAuth0 as an alternative to the hook for use with class components. We have created this new React SDK in order to improve the developer experience when integrating Auth0. This SDK makes it easier to integrate …

[katab]

Hi @dan.woda,

Thanks for your reply. I’m also not sure what the error is, as nothing happens when I click on the Login button. But I was able to fix this using the webauth from auth0-js instead. See code below

import { WebAuth } from ‘auth0-js’;
import ‘./Login.css’;

function Login() {

let webauth = new WebAuth({
    domain: MY DOMAIN NAME,
    responseType: "token",
    clientID: xxxxx,
    redirectUri: "http://localhost:3000/dashboard"
});

function authorizeLogin() {
    webauth.authorize({
        connection: 'google-oauth2'
    });
}

return (
    <div className="login-container">
        <div className="logo-container">
            <img src={logo} alt="" />
        </div>
        <div className="credentials-container">
            <input type="text" placeholder="Username" />
            <input type="password" placeholder="Password" />
            <button onClick={() => authorizeLogin()}>Sign In</button>
        </div>
    </div>
);

};

This is kind of similar to the SDK you have recommended. Also, thanks for introducing the react SDK. I will definitely try it out.

Greetings,

Katab

[dan.woda]

Glad you solved it, and thank you for posting your solution!