Authenticating user with social provider doesn't seem to work

Help
1

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!

3

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:

4

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

2 Likes
5

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

1 Like
6

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.