Ends in:
1 DAY
23 HRS
0 MIN
16 SEC
Ends in:
1 D
23 H
0 M
16 S
Open Closed

React Native External Login Approach? #2103


User avatar
0
rahul.patel@parsus.com created
  • ABP Framework version: v4.4.3
  • UI type: React Native
  • DB provider: EF Core / MongoDB
  • Tiered (MVC) or Identity Server Separated (Angular): No

Hi,

We are looking to enable external social logins in the React Native app. Taking Google sign-in for example, what would be the general approach in enabling this in the mobile app?


6 Answer(s)
  • User Avatar
    0
    EngincanV created
    Support Team .NET Developer

    Hi @rahul.patel@parsus.com, this question is not fully related to ABP.

    However, I want to give you information about what you need to do. There are some actions you need to take.

    1-) Get your clientId and clientSecret from Google Console API. 2-) Add the Microsoft.AspNetCore.Authentication.Google NuGet package to the app. 3-) Configure Google Authentication 4-) Install the google-signin npm package (https://github.com/react-native-google-signin/google-signin) (To use GoogleSignInButton component) and follow the steps (https://github.com/react-native-google-signin/google-signin#public-api)

  • User Avatar
    0
    rahul.patel@parsus.com created

    Hi,

    I should've specified a little more. We've been trying to follow the flow of Angular solution. At some point it looks like a redirect to the ASPNET Core app happens and there is logic to display a register screen if the user is new. Would we try to do the same in RN? Basically looking for guidance on what endpoints to call to auto register the user in ABP.

    Thanks!

  • User Avatar
    0
    Mehmet created

    Hi,

    In Angular side, we've used the angular-oauth2-oidc package to manage authorization code flow. As I know, there is no such package for the React Native. I do not know how can you achieve that but I can briefly explain the how code flow works:

    1. We execute initCodeFlow method of the OAuthService to navigate user to login page.
    2. OAuthService redirects to the IDS's page (url is like this: https://localhost:44305/connect/authorize?response_type=code&client_id=MyProjectName_App&state=R0xMQzR-NnkwbVgxMm8tOHozNVNLN2J5ZzBNfmN0eWxKQnloSUtIR2guWFFn&redirect_uri=https://commercial-demo.abp.io/index.html&scope=openid%20AbpCommercialDemo&code_challenge=coxrGgGtjvVVsX-ZrC3UU8nh9i1iUaUNKUXmcbKy3Yg&code_challenge_method=S256&nonce=R0xMQzR-NnkwbVgxMm8tOHozNVNLN2J5ZzBNfmN0eWxKQnloSUtIR2guWFFn)
    3. IDS redirects to login page (url is like this: https://localhost:44305/Account/Login?ReturnUrl=/connect/authorize/callback?response_type=code&client_id=MyProjectName_App&state=R0xMQzR-NnkwbVgxMm8tOHozNVNLN2J5ZzBNfmN0eWxKQnloSUtIR2guWFFn&redirect_uri=https%3A%2F%2Fcommercial-demo.abp.io%2Findex.html&scope=openid%20AbpCommercialDemo&code_challenge=coxrGgGtjvVVsX-ZrC3UU8nh9i1iUaUNKUXmcbKy3Yg&code_challenge_method=S256&nonce=R0xMQzR-NnkwbVgxMm8tOHozNVNLN2J5ZzBNfmN0eWxKQnloSUtIR2guWFFn)
    4. If login is successfull, IDS redirects to Angular app back (redirection url: http://localhost:4200?code=94DFAD919F8645959A13EC08E79636DEE658ECB11D3D654F8D0DEAC7BC14E605&scope=openid%20MyProjectName&state=R0xMQzR-NnkwbVgxMm8tOHozNVNLN2J5ZzBNfmN0eWxKQnloSUtIR2guWFFn&session_state=Hp45_ZHnuI2DJvBHfiqDilY-900FQmYAchPNm08yJ4o.6689B8D57ADA3BA44B02B792137710FA)
    5. angular-oauth2-oidc package performs a POST request: URL: https://localhost:44305/connect/token Body (form data): grant_type=authorization_code&code=94DFAD919F8645959A13EC08E79636DEE658ECB11D3D654F8D0DEAC7BC14E605&redirect_uri=https://commercial-demo.abp.io/index.html&code_verifier=U2Q1eExVY2I2ODVkQXZSY2VmeGFIZ3FxUXlfeFRRaU0ubFloRmFPSFdYTWFR&client_id=MyProjectName_App Response: {"id_token":"id token shortened for brevity","access_token":"access token shortened for brevity","expires_in":31536000,"token_type":"Bearer","scope":"openid AbpCommercialDemo"}

    You should examine the angular-oauth2-oidc package's source code for the details.

  • User Avatar
    0
    rahul.patel@parsus.com created

    Hi,

    Yes that's the part we're trying to figure out. In a mobile app I'd like to stick with client-side social login without transferring to the API UI. In ASP.NET Zero there was an ExternalAuthenticate endpoint that was called by Angular but i don't see that in abp.io

  • User Avatar
    0
    rahul.patel@parsus.com created

    Hi,

    Following up on this, possibly the "right" way to do this might be to add another Identity Server extension grant to exchange an external login token for a ID4 token:

    https://identityserver4.readthedocs.io/en/latest/quickstarts/community.html?highlight=external#exchanging-external-tokens-from-facebook-google-and-twitter

    Does the ABP team have thoughts on this or is another approach recommended?

  • User Avatar
    0
    gterdem created
    Senior .NET Developer

    Hello, We have an issue about this; discussing and trying to find the best way to implement token exchange. However I can not provide an exact date about when it will happen.

    You can try implementing it using identityserver-token-exchange library. it seems making implementation easier.

    Other than that, we don't have a recommended way of implementing external login token exchange at the moment.

Made with ❤️ on ABP v9.1.0-preview. Updated on December 02, 2024, 12:35