# \[Archive\] 403 error when trying to login using Auth0

**URL:** <https://builder.metamask.io/t/archive-403-error-when-trying-to-login-using-auth0/1418>\
**Category:** Embedded Wallets (Web3Auth)\
**Created:** [March 27, 2024, 1:53pm UTC](https://builder.metamask.io/t/archive-403-error-when-trying-to-login-using-auth0/1418 "2024-03-27T13:53:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![web31](https://avatars.discourse-cdn.com/v4/letter/w/a183cd/32.png) [@web31](https://builder.metamask.io/u/web31)\
**Post date:** [March 27, 2024, 1:53pm UTC](https://builder.metamask.io/t/archive-403-error-when-trying-to-login-using-auth0/1418/1 "2024-03-27T13:53:32Z")

</div>

> **🏛 Archived Content from Web3Auth Community**
> 
> This topic was originally posted by **web31** on 3/27/2024.  
> This content has been migrated from our previous community forum to preserve valuable discussions.

* * *

Im trying to setup SFA with React Native. When I try to press login it goes to the Auth0 login page. I successfully login. But after I get a 403 error. This is the error:

```auto
{
  "_bodyBlob": {
    "_data": {
      "__collector": [Object],
      "blobId": "92b4834c-2523-4aa3-8a66-7729fb730aa3",
      "offset": 0,
      "size": 161
    },
    "_bodyInit": {
      "_data": {
        "__collector": [Object],
        "blobId": "92b4834c-2523-4aa3-8a66-7729fb730aa3",
        "offset": 0,
        "size": 161
      }
    },
    "bodyUsed": false
  },
  "headers": {
    "map": {
      "content-length": "161",
      "content-security-policy": "default-src 'self';base-uri 'self';font-src 'self' https: data:;form-action 'self';frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src 'self';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests",
      "content-type": "application/json; charset=utf-8",
      "cross-origin-opener-policy": "same-origin",
      "cross-origin-resource-policy": "same-origin",
      "date": "Tue, 26 Mar 2024 21:25:03 GMT",
      "etag": "W/\"a1-/mDt6IFe35ttqXMNpfBTzBS1i4Q\"",
      "origin-agent-cluster": "?1",
      "referrer-policy": "no-referrer",
      "strict-transport-security": "max-age=15552000; includeSubDomains",
      "vary": "Origin, Accept-Encoding",
      "x-content-type-options": "nosniff",
      "x-dns-prefetch-control": "off",
      "x-download-options": "noopen",
      "x-frame-options": "SAMEORIGIN",
      "x-permitted-cross-domain-policies": "none",
      "x-xss-protection": "0"
    }
  },
  "ok": false,
  "status": 403,
  "statusText": "",
  "type": "default",
  "url": "https://signer.web3auth.io/api/allow"
}

```

This is the code:

```auto
import '@ethersproject/shims';
import { decode as atob } from "base-64";
import React, {useEffect, useState} from 'react';
import {
  Button,
  ScrollView,
  StyleSheet,
  Text,
  View,
  Dimensions,
  ActivityIndicator,
} from 'react-native';
import {IProvider} from '@web3auth/base';
import Web3Auth from ‘@web3auth/single-factor-auth-react-native’;
import {EthereumPrivateKeyProvider} from ‘@web3auth/ethereum-provider’;
import EncryptedStorage from ‘react-native-encrypted-storage’;
import { Auth0Provider, useAuth0 } from “react-native-auth0”;
import {ethers} from ‘ethers’;
import { clientIdWeb3, clientIdAuth0, domainAuth0, } from ‘./Config’;
const clientId = clientIdWeb3; // get from https://dashboard.web3auth.io
const verifier = ‘Auth02’;
const chainConfig = {
chainId: ‘0x1’, // Please use 0x1 for Mainnet
rpcTarget: ‘https://rpc.ankr.com/eth’,
displayName: ‘Ethereum Mainnet’,
blockExplorer: ‘https://etherscan.io/’,
ticker: ‘ETH’,
tickerName: ‘Ethereum’,
};
const web3auth = new Web3Auth(EncryptedStorage, {
clientId,
web3AuthNetwork: ‘sapphire_mainnet’,
usePnPKey: false, // By default, this sdk returns CoreKitKey
});
const privateKeyProvider = new EthereumPrivateKeyProvider({
config: {chainConfig},
});
const Home = () => {
const [provider, setProvider] = useState<IProvider | null>(null);
const [loggedIn, setLoggedIn] = useState<boolean>(false);
const [loading, setLoading] = useState<boolean>(false);
const [userInfo, setUserInfo] = useState<string>(‘’);
const [consoleUI, setConsoleUI] = useState<string>(‘’);
useEffect(() => {
async function init() {
try {
await web3auth.init(privateKeyProvider);
    if (web3auth.sessionId) {
      setProvider(web3auth.provider);
      setLoggedIn(true);
      uiConsole('Logged In', web3auth.sessionId);
    }
  } catch (error) {
    uiConsole(error, 'mounted caught');
  }
}
init();

}, );
const { authorize, clearSession, getCredentials } = useAuth0();
const signInWithAuth0 = async (): Promise<string | undefined> => {
try {
// Authorization with Auth0
const credentials: any = await authorize({
domain: domainAuth0,
scope: “openid profile email”,
responseType: “token id_token”,
customScheme: “com.web3authsfafirebase”,
} as any); // Type assertion for bypassing type checks
  return credentials.idToken;
} catch (error) {
  console.error("Error during Auth0 signIn:", error);
  throw new Error("Failed to sign in with Auth0");
}

};
const parseToken = (token: any) => {
try {
const base64Url = token.split(‘.’)[1];
const base64 = base64Url.replace(‘-’, ‘+’).replace(‘_’, ‘/’);
return JSON.parse(atob(base64 || ‘’));
} catch (err) {
uiConsole(err);
return null;
}
};
const login = async () => {
try {
setConsoleUI(“Logging in”);
setLoading(true);
const idToken : any = await signInWithAuth0();
uiConsole(“idToken”, idToken);
  const parsedToken = parseToken(idToken);
  setUserInfo(parsedToken);

  const verifierId = parsedToken.sub;
  const provider = await web3auth!.connect({
    verifier, // e.g. `web3auth-sfa-verifier` replace with your verifier name, and it has to be on the same network passed in init().
    verifierId, // e.g. `Yux1873xnibdui` or `name@email.com` replace with your verifier id(sub or email)'s value.
    idToken,
  });

  setLoading(false);
  if (web3auth.connected) {
    setLoggedIn(true);
    uiConsole('Logged In');
  }
} catch (e) {
  uiConsole(e);
  setLoading(false);
}

};
const getAccounts = async () => {
setConsoleUI(‘Getting account’);
// For ethers v5
// const ethersProvider = new ethers.providers.Web3Provider(this.provider);
const ethersProvider = new ethers.BrowserProvider(provider!);
// For ethers v5
// const signer = ethersProvider.getSigner();
const signer = await ethersProvider.getSigner();

// Get user's Ethereum public address
const address = signer.getAddress();
uiConsole(address);

};
const getBalance = async () => {
setConsoleUI(‘Fetching balance’);
// For ethers v5
// const ethersProvider = new ethers.providers.Web3Provider(this.provider);
const ethersProvider = new ethers.BrowserProvider(provider!);
// For ethers v5
// const signer = ethersProvider.getSigner();
const signer = await ethersProvider.getSigner();

// Get user's Ethereum public address
const address = signer.getAddress();

// Get user's balance in ether
// For ethers v5
// const balance = ethers.utils.formatEther(
// await ethersProvider.getBalance(address) // Balance is in wei
// );
const balance = ethers.formatEther(
  await ethersProvider.getBalance(address), // Balance is in wei
);

uiConsole(balance);

};
const signMessage = async () => {
setConsoleUI(‘Signing message’);
// For ethers v5
// const ethersProvider = new ethers.providers.Web3Provider(this.provider);
const ethersProvider = new ethers.BrowserProvider(provider!);
// For ethers v5
// const signer = ethersProvider.getSigner();
const signer = await ethersProvider.getSigner();
const originalMessage = 'YOUR_MESSAGE';

// Sign the message
const signedMessage = await signer.signMessage(originalMessage);
uiConsole(signedMessage);

};
const logout = async () => {
web3auth.logout();
setProvider(null);
setLoggedIn(false);
setUserInfo(‘’);
};
const uiConsole = (…args: any) => {
setConsoleUI(JSON.stringify(args || {}, null, 2) + ‘\n\n\n\n’ + consoleUI);
console.log(…args);
};
const loggedInView = (
<View style={styles.buttonArea}>
<Button title=“Get User Info” onPress={() => uiConsole(userInfo)} />
<Button title=“Get Accounts” onPress={() => getAccounts()} />
<Button title=“Get Balance” onPress={() => getBalance()} />
<Button title=“Sign Message” onPress={() => signMessage()} />
<Button title=“Log Out” onPress={logout} />
</View>
);
const unloggedInView = (
<View style={styles.buttonArea}>
<Button title=“Login with Web3Auth” onPress={login} />
{loading && <ActivityIndicator />}
</View>
);
return (
<View style={styles.container}>
{loggedIn ? loggedInView : unloggedInView}
<View style={styles.consoleArea}>
<Text style={styles.consoleText}>Console:</Text>
<ScrollView style={styles.consoleUI}>
<Text>{consoleUI}</Text>
</ScrollView>
</View>
</View>
);
}
const App = () => {
return (
<Auth0Provider domain={domainAuth0} clientId={clientIdAuth0}>
<Home />
</Auth0Provider>
);
};

```

- SDK Version: “@web3auth/single-factor-auth-react-native”: “^2.1.0”,

- Platform: react-native

- Browser Console Screenshots:

I have setup a custom authentication inside the Web3Auth dashboard.

---

<div class="post-metadata">

**Author:** ![web31](https://avatars.discourse-cdn.com/v4/letter/w/a183cd/32.png) [@web31](https://builder.metamask.io/u/web31)\
**Post date:** [April 1, 2024, 8:39pm UTC](https://builder.metamask.io/t/archive-403-error-when-trying-to-login-using-auth0/1418/2 "2024-04-01T20:39:23Z")

</div>

Is there anyone that can reply?

---

<div class="post-metadata">

**Author:** ![guru](https://avatars.discourse-cdn.com/v4/letter/g/ecae2f/32.png) [@guru](https://builder.metamask.io/u/guru)\
**Post date:** [April 3, 2024, 7:04am UTC](https://builder.metamask.io/t/archive-403-error-when-trying-to-login-using-auth0/1418/3 "2024-04-03T07:04:05Z")

</div>

```
  <a href="https://github.com/Web3Auth/web3auth-core-kit-examples/blob/main/single-factor-auth-react-native/sfa-rn-expo-auth0-example/App.tsx#L77" target="_blank" rel="noopener">github.com</a>

```

#### [Web3Auth/web3auth-core-kit-examples/blob/main/single-factor-auth-react-native/sfa-rn-expo-auth0-example/App.tsx#L77](https://github.com/Web3Auth/web3auth-core-kit-examples/blob/main/single-factor-auth-react-native/sfa-rn-expo-auth0-example/App.tsx#L77)

```
<pre class="onebox"><code class="lang-tsx">
  <ol class="start lines" start="67" style="counter-reset: li-counter 66 ;">
      <li>}, []);</li>
      <li></li>
      <li>const { authorize, clearSession, getCredentials } = useAuth0();</li>
      <li></li>
      <li>const signInWithAuth0 = async () =&gt; {</li>
      <li> try {</li>
      <li> //@ts-ignore</li>
      <li> await authorize(</li>
      <li> { </li>
      <li> scope: "openid profile email", </li>
      <li class="selected"> // connection: "google-oauth2" </li>
      <li> }, </li>
      <li> { </li>
      <li> customScheme: "auth0.com.web3authsfaauth0" </li>
      <li> }, </li>
      <li> { </li>
      <li> responseType: "token id_token" </li>
      <li> });</li>
      <li> const credentials = await getCredentials();</li>
      <li></li>
      <li> return credentials.idToken;</li>
  </ol>
</code></pre>

```

please refer this example please check authorize function from auth0 also compare other helper functions implementation

let us know if still facing issues

---

<div class="post-metadata">

**Author:** ![web31](https://avatars.discourse-cdn.com/v4/letter/w/a183cd/32.png) [@web31](https://builder.metamask.io/u/web31)\
**Post date:** [April 8, 2024, 8:43am UTC](https://builder.metamask.io/t/archive-403-error-when-trying-to-login-using-auth0/1418/4 "2024-04-08T08:43:07Z")

</div>

The solution you’re proposing here is not working. I even downgraded the solution. Am I maybe doing something wrong in the web3auth custom auth dashboard?

[![Screenshot 2024-04-03 at 14.28.49](https://canada1.discourse-cdn.com/flex011/uploads/metamaskbuilderhub/original/1X/f4d560fd3e5839d7a02dff436757d982901cca58.jpeg)
Screenshot 2024-04-03 at 14.28.49892×1482 158 KB
](https://web3auth.io/community/uploads/default/original/2X/5/54d46093b441056328d35c572447b6d8250f5726.jpeg "Screenshot 2024-04-03 at 14.28.49")

---

<div class="post-metadata">

**Author:** ![guru](https://avatars.discourse-cdn.com/v4/letter/g/ecae2f/32.png) [@guru](https://builder.metamask.io/u/guru)\
**Post date:** [April 16, 2024, 2:14am UTC](https://builder.metamask.io/t/archive-403-error-when-trying-to-login-using-auth0/1418/5 "2024-04-16T02:14:26Z")

</div>

Hey Seems issue with id token  
to debug more please schedule a session here

 ![](https://canada1.discourse-cdn.com/flex011/uploads/metamaskbuilderhub/original/1X/74db8c48248719378b157fbe615beffdfe88cda6.png)

```
  <a href="https://calendly.com/guru-web3/30min" target="_blank" rel="noopener">Calendly</a>

```

 ![](https://canada1.discourse-cdn.com/flex011/uploads/metamaskbuilderhub/original/1X/4250ade8fb95dbd96ca4c560811719e4132d2f6c.png)

### [30 Minute Meeting - Guru Ramu](https://calendly.com/guru-web3/30min)