Tag: Pinterest Auth

Create Native Modules – React Native – Pinterest

Many a times in React Native App development stage, we come at a point when we want to add a features which is not in-built in react native but can be developed by native IOS or Android coding. At that stage we need to develop a Native Module for our app which allow us to extend the native features to react native.

Create a react native project “PinterestAuth” using command below :

1
$ react-native init PinterestAuth

Change directory to “ios” using the below command :

1
$ cd PinterestAuth/ios

Now, using the command below, create a pod file

1
$ pod init

Open the Podfile and add the following dependency in the target section :

1
pod 'PinterestSDK', :git => 'https://github.com/pinterest/ios-pdk.git'

After saving the Podfile run the following command :

1
$ pod install

Now create a Pinterest app by going to this url and note down the APP ID for next steps.

Open project in XCode, right-click .plist file and select Open As > Source Code. Add the code below between  the <dict> </dict> tags :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleURLName</key>
      <string></string>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>pdk{your-app-id}</string>
      </array>
    </dict>
  </array>
 
<key>LSApplicationQueriesSchemes</key>
  <array>
  <string>pinterestsdk.v1</string>
  </array>

Replace {your-app-id} with APP ID generated above.

Next, In file AppDelegate.m add the code below :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#import "PDKClient.h"
 
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
.
.
.
 
  [PDKClient configureSharedInstanceWithAppId:@"4948094164569964648"];
.
.
.
}
 
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<NSString *,id> *)options {
  
  BOOL handled = [[PDKClient sharedInstance] handleCallbackURL:url];
                                                                                                                                                                          
  return handled;
}

Right click on “PinterestAuth” folder and create a new Cocoa Touch Class with name “PinterestManage”. Now, we have two files PinterestManager.h and PinterestManager.m.

In the PinterestManager.h add the code below :

1
2
3
4
5
6
#import <Foundation/Foundation.h>
#import "React/RCTBridgeModule.h"
 
@interface PinterestManager : NSObject <RCTBridgeModule>
 
@end

Next, we will add the code below to PinterestManager.m :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#import "PinterestManager.h"
#import "PDKClient.h"
#import "PDKResponseObject.h"
 
@implementation PinterestManager
 
 
RCT_EXPORT_MODULE();
 
RCT_REMAP_METHOD(pinterest,
                 resolver:(RCTPromiseResolveBlock)resolve
                 rejecter:(RCTPromiseRejectBlock)reject)
{
 
  [[PDKClient sharedInstance] authenticateWithPermissions:@[PDKClientReadPublicPermissions,
                                                            PDKClientWritePublicPermissions,
                                                            PDKClientReadRelationshipsPermissions,
                                                            PDKClientWriteRelationshipsPermissions]
                                       fromViewController:nil
                                              withSuccess:^(PDKResponseObject *responseObject)
   {      
    
       NSString *token = [[PDKClient sharedInstance] oauthToken];
    
       resolve(token);
 
   } andFailure:^(NSError *error) {
 
     reject(@"get_error", @"Pinterest login error", error);
    
   }];
 
 
}
 
@end

In the above code we are creating a Pinterest instance using the instance we are getting the token that is generated after user authenticates and return the token as a promise . In case, there is error, we reject with the error message.

Now, open file index.ios.js and add the code below :

1
2
3
4
5
6
7
8
9
10
11
import { NativeModules } from 'react-native';  
 
const PinterestManager = NativeModules.PinterestManager;
 
PinterestManager.pinterest()
.then((authToken) => {
  console.log("authToken : ",authToken);
})
.catch((error) => {
   console.log(error);
})

Video Tutorial