AuthSession.useAuthRequest

I tried to auth with

My auth button:

import React, { useEffect } from "react";
import { DesiresButton } from "../common/DesiresButton";
import * as AuthSession from "expo-auth-session";
import * as WebBrowser from "expo-web-browser";

export const DesiresVKButton = ({
  appId,
  onLoginSuccess,
  onLoginFailure,
  iconName,
  children,
  ...props
}) => {
  WebBrowser.maybeCompleteAuthSession();
  const useProxy = true;
  const redirectUri = AuthSession.makeRedirectUri({
    native: "https://oauth.vk.com/blank.html",
    useProxy,
  });

  console.log(redirectUri);

  const discovery = {
    authorizationEndpoint: "https://oauth.vk.com/authorize",
    tokenEndpoint: "https://oauth.vk.com/access_token"
  };

  
  const [request, response, promptAsync] = AuthSession.useAuthRequest(
    {
      clientId: appId,
      
      redirectUri,
      usePKCE: false,
      extraParams: {
        display: "mobile",
        responseType: "token",
        v: "5.92"
      },
      scopes: ["email", "name"],
    },
    discovery
  );

  useEffect(() => {
    if (response) {
      console.log(response, "VK_AUTH");
    }
  }, [response]);

  return (
    <DesiresButton
      iconName={iconName}
      iconSize={20}
      {...props}
      onPress={() => promptAsync()}
    >
      {children}
    </DesiresButton>
  );
};

redirect_uri: Sign-in Complete
returns

Something went wrong trying to finish signing in. Please close this screen to go back to the app.

Sytem: Android.

  Expo CLI 4.0.17 environment info:
    System:
      OS: Windows 10 10.0.18363
    Binaries:
      Node: 14.15.0 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.22.10 - C:\Users\klish\AppData\Roaming\npm\yarn.CMD
      npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
    SDKs:
      Android SDK:
        API Levels: 28, 29, 30
        Build Tools: 28.0.3, 29.0.2, 30.0.2, 30.0.3
        System Images: android-28 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: Version  4.1.0.0 AI-201.8743.12.41.6953283
    npmPackages:
      expo: ~40.0.0 => 40.0.0
      react: ^17.0.1 => 17.0.1
      react-dom: 16.13.1 => 16.13.1
      react-native: https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz => 0.63.2
      react-native-web: ~0.13.12 => 0.13.18
    Expo Workflow: managed

what am I doing wrong

1 Like

Im having the same issue, followed the documentation yet auth.expo.io doesnt redirect back to the app.

I’m thinking either that proxy service is broken or the documentation is out of date?

Im encountering the same issue when using the proxy and the expo client.

it worked for me but this is not what i wanted

import React, { useEffect } from "react";
import { DesiresButton } from "../common/DesiresButton";
import * as AuthSession from "expo-auth-session";
import * as WebBrowser from "expo-web-browser";

export const DesiresVKButtonAlt = ({
  appId,
  onLoginSuccess,
  onLoginFailure,
  iconName,
  children,
  ...props
}) => {
  const authHandler = async () => {
    WebBrowser.maybeCompleteAuthSession();
    const redirectUrl = AuthSession.makeRedirectUri({ useProxy: true });
    console.log(redirectUrl);
    const result = await AuthSession.startAsync({
      authUrl:
        `https://oauth.vk.com/authorize?` +
        `client_id=${appId}&` +
        `display=mobile&` +
        `redirect_uri=${encodeURIComponent(redirectUrl)}&` +
        `response_type=token&` +
        `v=5.92`,
    });
    switch (result.type) {
      case "success":
        onLoginSuccess({
          grant_type: 'convert_token',
          token: result.params.access_token,
          backend: "vk-oauth2",
        });
        break;
      case "error":
        onLoginFailure(result.error);
    }
  };

  return (
    <DesiresButton
      iconName={iconName}
      iconSize={20}
      {...props}
      onPress={authHandler}
    >
      {children}
    </DesiresButton>
  );
};

1 Like

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