K
Kinde•4d ago
RavS94

How to actually get started with Expo?

I’m wanting to try out Kinde for an existing expo app, but I have to say the documentation and experience so far is really poor. 1. The docs mention npm i @kinde-oss/react-native-sdk-0-7x 2. The Kinde project Quick Start has no option for Expo, only react native and the steps there aren't directed or explanatory 3. The Expo starter kit references modules such as @kinde/expo which isn’t documented anywhere Is it just me struggling and confused here? I haven't even written any code yet lol If someone can direct me to a proper source of truth that would be valued!
1 Reply
Ages
Ages•3d ago
Hi there, It sounds like the confusion is coming from mixing two different SDKs: - @kinde-oss/react-native-sdk-0-7x is built for native React Native projects. - @kinde/expo is tailored for Expo-managed projects. Since you’re using Expo, the recommended approach is to use @kinde/expo. Here’s a temporary solution to get you started: 1. Install the Expo SDK: 
   npm install @kinde/expo
   
   npm install @kinde/expo
2. Wrap Your App with the Kinde Provider: In your App.js (or main entry file), set up the provider like this: 
   import { KindeAuthProvider } from '@kinde/expo';
   
   export default function App() {
     return (
       <KindeAuthProvider
         config={{
           domain: "your-app.kinde.com",   // Your Kinde domain
           clientId: "your-client-id",       // Your Kinde client ID
           scopes: "openid profile email offline", // Default scopes
         }}
       >
         {/* Your app components go here */}
       </KindeAuthProvider>
     );
   }
   
   
   import { KindeAuthProvider } from '@kinde/expo';
   
   export default function App() {
     return (
       <KindeAuthProvider
         config={{
           domain: "your-app.kinde.com",   // Your Kinde domain
           clientId: "your-client-id",       // Your Kinde client ID
           scopes: "openid profile email offline", // Default scopes
         }}
       >
         {/* Your app components go here */}
       </KindeAuthProvider>
     );
   }
3. Implement Authentication with the Provided Hook: Use the useKindeAuth hook to handle login, registration, and logout in your components: 
   import { useKindeAuth } from '@kinde/expo';
   import { Button, View } from 'react-native';
   
   export default function Authentication() {
     const kinde = useKindeAuth();
   
     return !kinde.isAuthenticated ? (
       <View>
         <Button title="Sign In" onPress={() => kinde.login({})} />
         <Button title="Sign Up" onPress={() => kinde.register({})} />
       </View>
     ) : (
       <Button title="Logout" onPress={() => kinde.logout({ revokeToken: true })} />
     );
   }
   
   
   import { useKindeAuth } from '@kinde/expo';
   import { Button, View } from 'react-native';
   
   export default function Authentication() {
     const kinde = useKindeAuth();
   
     return !kinde.isAuthenticated ? (
       <View>
         <Button title="Sign In" onPress={() => kinde.login({})} />
         <Button title="Sign Up" onPress={() => kinde.register({})} />
       </View>
     ) : (
       <Button title="Logout" onPress={() => kinde.logout({ revokeToken: true })} />
     );
   }
I hope this clears up the confusion and gets you moving forward with your Expo project. Let me know if you have any other questions

Did you find this page helpful?