I cant Authorize using react native

Developer API
1 
import React, {useState} from 'react';
import {Alert, Button, StyleSheet, Text, View} from 'react-native';
import {WebView} from 'react-native-webview';
import axios from 'axios';

const LoginScreen = () => {
  const [isLoggingIn, setIsLoggingIn] = useState(false);
  const clientId = '';
  const redirectUri = 'http://127.0.0.1:4000';

  const handleLogin = () => {
    setIsLoggingIn(true);
  };

  const onNavigationStateChange = async navState => {
    const {url} = navState;
    if (url.includes(`${redirectUri}?code=`)) {
      const code = url.split('code=')[1];
      setIsLoggingIn(false);
      console.log('Authorization code:', code);

      try {
        const response = await axios.post(
          'http://192.168.0.104:3002/auth/code',
          {
            code,
          },
        );
        console.log('Response from backend:', response.data);
        Alert.alert('Success', 'Logged in successfully!');
      } catch (error) {
        console.error('Error sending code to backend:', error);
        Alert.alert('Error', 'Failed to log in.');
      }
    }
  };

  return (
    <View style={styles.container}>
      {isLoggingIn ? (
        <WebView
          source={{
            uri: `https://api.upstox.com/v2/login/authorization/dialog?response_type=code&client_id=${clientId}&redirect_uri=${redirectUri}`,
          }}
          onNavigationStateChange={onNavigationStateChange}
          startInLoadingState
        />
      ) : (
        <>
          <Text style={styles.title}>Login to Upstox</Text>
          <Button title="Login" onPress={handleLogin} />
        </>
      )}
    </View>
  );
};

export default LoginScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
  title: {
    fontSize: 24,
    marginBottom: 16,
    textAlign: 'center',
  },
});

frontend code

// index.js
const express = require("express");

const bodyParser = require("body-parser");
const cors = require("cors");
const app = express();
const port = 3002;
const axios = require("axios");
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(cors());

const clientId = "";
const clientSecret = "";
const redirectUri = "http://127.0.0.1:4000";

const registeredUsers = [];

app.post("/auth/code", async (req, res) => {
  const { code } = req.body;
  console.log("Authorization code at backend:", code);
  if (!code) {
    return res.status(400).send("Authorization code is missing");
  }
  try {
    const response = await axios.post(
      "https://api.upstox.com/v2/login/authorization/token",
      {
        client_id: clientId,
        client_secret: clientSecret,
        grant_type: "authorization_code",
        code,
        redirect_uri: redirectUri,
      }
    );
    console.log(response.data);
    const { access_token, refresh_token } = response.data;
    console.log("Access token:", access_token);
    console.log("Refresh token:", refresh_token);

    // Here you would typically save the tokens to a database or session
    res.json({ access_token, refresh_token });
  } catch (error) {
    console.error(
      "Error exchanging code for tokens:",
      error.response?.data || error.message
    );
    res.status(500).send("Error exchanging code for tokens");
  }
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

Error of : -
WARN Encountered an error loading page {“canGoBack”: false, “canGoForward”: false, “code”: -6, “description”: “net::ERR_CONNECTION_REFUSED”, “loading”: false, “target”: 185, “title”: “Login to Upstox”, “url”: “http://127.0.0.1:4000/?code=tnYjuf”}

image
image264×600 18.3 KB

.
please guide me i want to solve the error
@Pradeep_Jaiswar

2

Hello @vinod_mokashi

It appears that this error message is not exclusive to Upstox. Please verify that the redirect URL you provided (http://127.0.0.1:4000) is operational on your end, as you have successfully obtained the authentication code from the first stage of authentication.

For more information on authentication please refer to our API Documentation | Authentication

Thanks

3

Thank You issue has been solved