React Native External Login Approach? #2103 | Support Center | ABP Commercial

rahul.patel@parsus.com created 2 years ago

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)

0

EngincanV created 2 years ago
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)
0

rahul.patel@parsus.com created 2 years ago

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!
0
Mehmet created 2 years ago
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:

We execute initCodeFlow method of the OAuthService to navigate user to login page.

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)

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)

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)

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.
0

rahul.patel@parsus.com created 2 years ago

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
0

rahul.patel@parsus.com created 2 years ago

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?
0

gterdem created 2 years ago
Support Team 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.

1

Have an answer to this question? Log in and write your answer.