Now that I have an ionic app with a qr code, I want a system that When the user takes their phone and scans the qrcode (use any app to scan), after scanning, a form will automatically open on the user’s phone for the user to fill out information. I would like to know if it is possible.
1 post - 1 participant
I’m using Cordova in my project but I want to use capacitor-google-auth plugin to Google Sign In.
I follow this tutorial
GitHub - CodetrixStudio/CapacitorGoogleAuth: Capacitor plugin for Google Auth. Lightweight & no dependencies.
I added GoogleService-Info.plist file and wrote inside
{
"appId": "com.project.app",
"appName": "project",
"plugins": {
"GoogleAuth": {
"scopes": ["profile","email"],
"serverClientId": "53xxxxxxxxxxx-djnxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com",
"forceCodeForRefreshToken": true
}
}
}
I also download 0Auth client ID plist file from Google Cloud but there is no path App / App to put that file.
My target folder looks like this
How can I make these things work?
1 post - 1 participant
Estoy empezando a utilizar Ionic y estoy realizando un sitio de muestra para un trabajo escolar, realice un “login” en donde mis botones y routerLink que me dirigen a “registrar” y “olvide mi contraseña” funcionan, pero cuando entro a esos componentes mis routerLink para redirigirme a la vista “body” donde tengo desarrollado el login, no funcionan, me aparecen en la consola pero no me dirige al componente “body” 
home.page.html
<ion-header class="ion-no-border">
<app-header></app-header>
</ion-header>
<ion-content>
<app-body></app-body>
</ion-content>
<ion-footer>
<app-footer></app-footer>
</ion-footer>
register.component.html
<ion-button class="boton" [routerLink]="['body']" block color="primary" type="submit" [disabled]="loginForm.invalid">
Registrar
</ion-button>
home.routing.module.ts
const routes: Routes = [
{
path: '',
component: HomePage,
},
{
path: 'register',
component: RegisterComponent,
},
{
path: 'body',
component: BodyComponent,
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomePageRoutingModule {}
1 post - 1 participant
Hello Ionic community!
I’d like to share the authentication approach I’ve implemented in my Ionic application, using the stack Angular/ExpressJS/MongoDB, and seek your valuable feedback, insights, and suggestions. My goal is to ensure that the authentication process is not only robust and secure but also aligns with best practices recommended by the community.
Overview of Authentication Approach:
In my Ionic application, I’ve implemented an authentication process that combines username/password authentication with biometric authentication (fingerprint recognition). Here’s a brief overview of the key components of the authentication approach:
username and password are sent to the server-side (ExpressJS server).
On successful authentication (After successful search for user existance and comparing the given password encryption with the existing one) I generate an Access, refresh token and a biometric token with the JWT package using the RS256 algorithm with a validty date of 1 hour for the access token and 2 hours for the refresh token. After that, the tokens are sent to the client.
All the tokens are generated using the jsonwebtoken package
When tokens are received by the frontend I store them locally. For this purpose, I do use the plugin capacitor-secure-storage that encrypts the keys using AES in GCM mode with a secret key generated by the Android KeyStore, then stored in SharedPreferences, which is specific to the app. If the app is deleted, its data is deleted as well.
After this I grant access to user account, and on every request to the server I use the stored access and refresh token to get access to resources on the server.
As I have mentioned earlier biometric token is generated on the server-side and transmitted to the client-side along with the access and refresh token (for the Biometric token: encryption Alg is RS256 with a 30 days validity).
For biometric authentication I do use the cordova fingerprint AIO plugin.
Upon successful biometric authentication, I do send the locally stored biometric token on the device to the server side for validation. Once the token is being validated by the server side, I do send access and refresh token to the client side.
I believe that implementing a robust and secure authentication process is crucial for the overall security and integrity of my Ionic application. I look forward to hearing your thoughts, feedback, and suggestions on the approach I’ve described.
Thank you for your time and contributions!
1 post - 1 participant
Our team seems to always come across hurdles where one person’s machine is out of whack and the project doesnt run properly. Wondering if running in a docker container would resolve this?
1 post - 1 participant
I want to use 2 headers like shown in the docs condense header (for ios) and used the correct props like transfluent and collape, but this breaks my page transitions. My dev console shows following error:
Cannot read properties of null (reading ‘getBoundingClientRect’)
at createLargeTitleTransition (chunk-GHBCID63.js?v=0ecf4cc5:57:64)
at iosTransitionAnimation (chunk-GHBCID63.js?v=0ecf4cc5:272:35)
at animation (chunk-QARUQ2O5.js?v=0ecf4cc5:977:17)
If i remove the second header, my page transitions work like usual.
Here is my very basic “IonBase” component, which I use on every page.
<template>
<ion-page>
<ion-header :translucent="true">
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button color="secondary" text="" />
</ion-buttons>
<ion-buttons slot="end">
<ion-menu-button color="primary" />
</ion-buttons>
<ion-title>{{ title }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="contentFullscreen">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">{{ title }}</ion-title>
</ion-toolbar>
</ion-header>
<div :class="noContentPadding ? '' : 'ion-padding'">
<slot />
</div>
</ion-content>
</ion-page>
</template>
<script setup lang="ts">
import {
IonPage,
IonHeader,
IonToolbar,
IonButtons,
IonBackButton,
IonMenuButton,
IonTitle,
IonContent,
} from '@ionic/vue'
interface Props {
title: string
noContentPadding?: boolean
contentFullscreen?: boolean
}
withDefaults(defineProps<Props>(), {
noContentPadding: false,
contentFullscreen: true,
})
</script>
2 posts - 2 participants
When this key is set to NO, your app will not terminate when the user switches to another app. Instead, it will move to the background and enter a suspended state. This should prevent the black screen issue.
Here’s how you can modify your Info.plist file:
UIApplicationExitsOnSuspend
I am using ionic capacitor and while i click on app switcher i mean my application goes at the background then screen shows black.
2 posts - 2 participants
Hi, I’m using a custom icon within my accordion by adding the class ion-accordion-toggle-icon to an IonIcon within a IonItem, within an IonAccordion. The new icon is showing up as expected, but when it is expanded I need it to rotate 90 deg instead of 190 deg. It doesn’t look like there’s an attribute for controlling this, but I figured I could do it with CSS since there is an accordion-expanded class that gets applied to the accordion component. No matter what I try I’m not able to get a selector to apply styles to the icon within though.
I’ve tried straight CSS like this:
.accordion-expanded > [slot="header"] .ion-accordion-toggle-icon
And I’ve tried using the shadow part for the accordion like this:
ion-accordion::part(header expanded) .ion-accordion-toggle-icon
Neither of those worked. Anyone have a suggestion on how to make this work?
Also, is it just not possible to access elements through an ionic shadow part, like i’m trying to do here?
Here is the React code I’m using for the accordion:
<IonAccordion color={color} toggleIconSlot={toggleIconSlot} value={accordionValue}>
<IonItem color={color} data-test="accordion-item" lines="none" slot="header">
{header}
<IonIcon
className="ion-accordion-toggle-icon"
color={color}
icon={IconList.chevronRight as IconName}
slot={toggleIconSlot}
/>
</IonItem>
{content}
</IonAccordion>
Thanks!
2 posts - 2 participants
Hi! I’m using Ionic 7 version and I’m working with pages like login, register and home. I’ve just added this leaftlet map feature on the background; however I don’t know why everytime I’m transitioning between pages the general style of the page I’m going doesn’t load correctly. For example, when I try to change from register to login after pressing the button for doing so, the screen display only appears half of the interface at a half, which leads me to double click that button AND refresh the page I want to go so that I can view the style the way it actually is. I would appreciate if someone can help me to fix this issue. Thanks!
1 post - 1 participant
Is there an option to add a maker to the map using the native plugin that is a Text label and an image?
like this:
with the API its simple just passing the ‘label’ argument but in the native plugin its not present.
thanks for any help. o/
1 post - 1 participant
VERY SIMPLE QUESTION:
Is it possible to allow requests to servers hosted using self signed certificates?
As far I understood, the problem is the WebView.
Using Java code, I can trust my certificate, but access https inside the WebView I can’t.
MORE EXTENDED QUESTION:
I created an Ionic App that requests to an https server. (it doesn’t work).
And I created an Android Java App that requests the same server. (it works).
The Ionic app code: ionic app
The Java app code: java app
I created a very simple page in an Apache2 server on 192.168.1.27 using SSL (self signed certificate) and CORS enabled.
I created the certificate using:
sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout ./server.key -out ./server.crt -addext "subjectAltName = IP.1:192.168.1.27"
In the Ionic app I called:
this.http.get('https://192.168.1.27:8443').subscribe({
next: (response) => { console.log(response); },
error: (error) => { console.error(error); },
complete: () => console.log('completed!!!!')
});
I copied the server.crt to res/raw/server.crt in both apps.
I created the file xml/network_security_config.xml
I trusted the certificate, I allowed clear text traffic to 192.168.1.27 in both apps.
Using my Java Android app (on a physical device) the request call works fine.
Using ionic serve in another computer with another IP (192.168.1.2), my app works.
Using my Ionic app on an Android physical device I get this error:
If I open a browser using my Android cellphone, I can navigate to https://192.168.1.27:8443
On BridgeWebViewClient I overrided onReceivedSslError and printed a message to inspect if an ssl error is caught, and yes, I get an ssl error.
1 post - 1 participant
Hi there
As someone who is learning Ionic, I am finding inspiration from projects like these, https://youtu.be/2LbCnGrWv40
1 post - 1 participant
basically I have an app that consist of events, there are events registered on different times. I have local notification through which user get to know that his event is there before 15 minutes according to the requirements. It is working when the app is in use but when the app is killed notification is not appearing i want local notification to be appear when the app is killed ! Ionic 7 Capacitor 5 What to do 
2 posts - 2 participants
Hello, please tell me, can I make a line break placeholder in ion-input if the word doesn’t fit within the input width?
1 post - 1 participant
Originally published at: https://ionic.io/blog/recapping-ngconf-2024
In March, the Angular community gathered in Salt Lake City for the annual edition of ngConf. Here are some of the most interesting things I learned there.
1 post - 1 participant
Hello,
I have an application where the user is able to select English or Spanish as a language. The language change propagates to every component except app.component.ts, which I am unable to change once it has loaded. It keeps it’s static values.
Attempts to create services to do this resulted in circular dependencies, and attempts to add ‘brute force’ javascript to change these titles was also unsuccessful.
Any help is appreciated, thank you. If more detail is needed, please let me know.
1 post - 1 participant
I’ve developed a mobile application for both Android and iOS using Capacitor, Ionic, and Angular. My header doesn’t have an overlay. I’d like the status bar to have the same background color as my header (which is dynamic). I tried adding the following code:
await StatusBar.setBackgroundColor({ color: '#00000000' }); // Colore trasparente
await StatusBar.setOverlaysWebView({ overlay: true }); // Per coprire la barra di stato
This is the result:
I’d like to have header similar to:
What is the best practice?
Thanks
2 posts - 2 participants
I need to download a document from a remote server and save it locally for offline consultation. I developed this code but I am getting error.
I read that Filesystem has downloadFile() but I don’t understand as use it. So I created custom method in order to download file, convert to blob and then save it using plugin.
async downloadFile() {
const url = 'https://calibre-ebook.com/downloads/demos/demo.docx';
const filePath = 'demo.docx'; // Percorso locale dove salvare il file
try {
const response = await fetch(url, {
mode: 'no-cors'
});
const blob = await response.blob();
console.debug("BLOB:", blob);
await Filesystem.writeFile({
path: filePath,
data: blob,
directory: Directory.Documents,
encoding: Encoding.UTF8 // Puoi scegliere l'encoding del file
});
console.log('File saved successfully');
alert('File saved successfully');
} catch (error) {
console.error('Error occurred:', error);
alert ("Error occurred");
}
}
Error Occurred:
Error: NO_DATA
at returnResult ((index):956:32)
at cap.fromNative ((index):938:17)
at <anonymous>:1:18
Tested on Android Real Device.
Do I need to add any explicit permissions?
Thanks
3 posts - 2 participants
I’m working on a mobile app using Ionic with Vue 3 for the frontend, and I’ve set up routing using Vue Router to manage navigation between different pages in the app. My backend API is built with Laravel, handling sanctum authentication based on google token from the frontend, and other server-side logic.
In my router/index.ts, I’ve defined several routes:
LoginPage.vue): The entry point of the app, where users can log in.ChoosePackagePage.vue): A page accessible after logging in, allowing users to select a package.GamePage.vue and EndGamePage.vue): Part of the app’s core functionality, where users can play a game and see their results at the end.GamePage.vue reused): An alternative login method.import {createRouter, createWebHistory} from '@ionic/vue-router';
import {RouteRecordRaw} from 'vue-router';
import {SecureStoragePlugin} from 'capacitor-secure-storage-plugin';
import useAuthStore from "@/store/auth/auth";
import ChoosePackagePage from "@/pages/main/ChoosePackagePage.vue";
import GamePage from "@/pages/game/GamePage.vue";
import LoginPage from "@/pages/auth/LoginPage.vue";
import EndGamePage from "@/pages/game/EndGamePage.vue";
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'login',
component: LoginPage,
meta: {
requiresAuth: false,
},
},
{
path: '/home',
name: 'home',
component: ChoosePackagePage,
meta: {
requiresAuth: true,
},
},
{
path: '/game',
name: 'game',
component: GamePage,
meta: {
requiresAuth: true,
},
},
{
path: '/end-game',
name: 'end-game',
component: EndGamePage,
meta: {
requiresAuth: true,
},
},
// {
// path: '/social-login',
// name: 'social-login',
// component: GamePage,
// meta: {
// requiresAuth: false,
// },
// }
];
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes,
})
router.beforeEach(async (to, from) => {
const authStore = useAuthStore();
if (to.name === 'login' && authStore.isAuthenticated) {
return {name: 'home'};
}
if (to.meta.requiresAuth && !authStore.isAuthenticated) {
try {
console.log('trying to get to protected route, and not authenticated, checking for token in secure storage.')
const result = await SecureStoragePlugin.get({key: 'authToken'});
if (result.value) {
console.log('get the token from secure storage, setting it in the store and redirecting to home page.')
authStore.token = result.value; // Update the token in the store if found
return {path: '/home'};
}
console.log('no token found in secure storage, redirecting to login page.')
return {name: 'login'};
} catch (error) {
if (to.meta.requiresAuth) {
console.log('error getting token from secure storage, redirecting to login page.')
return {name: 'login'};
}
}
}
console.log('nothing returned so just continue to the route.', to.name, from.name)
});
export default router;
The router is configured with a beforeEach navigation guard to check if the user is authenticated (using a Pinia store authStore.isAuthenticated) and redirects to the login page if not authenticated, except for routes marked with requiresAuth: false.
The logout functionality is triggered by a button in my AppLayout.vue(for now until I get it all working then I will clean it up). When clicked, it:
logout action from authStore, which clears the user’s authentication token from both the app’s state and secure storage.ionRouter to navigate back to the login page.const logout = async () => {
await menuController.close();
await authStore.logout();
await ionRouter.push('/');
}
This process works as intended, and upon logout, the app should redirect users back to the LoginPage.vue.
After successfully logging in, I can navigate to the Choose Package Page without any issues, indicating that the login process and subsequent navigation work correctly. However, after logging out, although the user data is gone as it should be, the actual view doesn’t update to show the LoginPage.vue until I programatically refresh the view - but I can tell I am logged out because I am unable to click through to other parts of the app after I click the logout button.
console.log('nothing returned so just continue to the route.', to.name, from.name) and to and from have correct values.I’ve ensured that each page component, especially LoginPage.vue and ChoosePackagePage.vue, correctly uses <IonPage> to wrap the content, adhering to Ionic’s requirements for navigation and page management. They both have access to <IonPage> via my layouts, SimpleLayout and AppLayout.
I’m seeking advice on ensuring that after logging out, the app correctly updates the view to show the LoginPage.vue immediately, without requiring a manual refresh. I must be doing something silly I just cannot see it.
These are my layouts:
simple:
<script setup lang="ts">
import {IonContent, IonPage} from '@ionic/vue';
</script>
<template>
<ion-page>
<ion-content>
<div class="flex justify-center items-center h-screen">
<slot/>
</div>
</ion-content>
</ion-page>
</template>
AppLayout
<script setup lang="ts">
import {
IonContent,
IonPage,
IonHeader,
IonMenu,
IonIcon,
IonTitle,
IonToolbar,
IonMenuToggle,
IonList,
IonItem,
useIonRouter
} from '@ionic/vue'
import {menu, logOutOutline} from "ionicons/icons";
import {computed} from "vue";
import useAuthStore from "@/store/auth/auth";
import {menuController} from '@ionic/core/components';
const authStore = useAuthStore();
const ionRouter = useIonRouter();
const baseUrl = process.env.NODE_ENV === 'production' ? 'assets/img/' : '/assets/img/';
const backgroundImageUrl = computed(() => `${baseUrl}splash-pattern.svg`);
const logout = async () => {
await menuController.close();
await authStore.logout();
await ionRouter.push('/');
}
</script>
<template>
<ion-menu side="end" content-id="main-content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-list class="item-background-color">
<ion-item>
<ion-icon :icon="logOutOutline" class="w-10 h-10 mr-2 text-dark-green"></ion-icon>
<ion-label class="text-xl font-bold text-dark-green" @click="logout">Logout</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-page id="main-content" class="relative">
<ion-content>
<ion-menu-toggle class="absolute top-3 right-3 z-index-[9999999]">
<ion-icon :icon="menu" class="w-10 h-10"></ion-icon>
</ion-menu-toggle>
<div
class="bg-medium-salmon w-full flex flex-col items-center "
:style="{ backgroundImage: `url(${backgroundImageUrl})`, backgroundSize: '267%' }"
>
<slot/>
</div>
</ion-content>
</ion-page>
</template>
<style scoped>
ion-toolbar {
--background: #e75571;
}
ion-menu ion-content {
--background: #f6a8b7;
}
.item-background-color {
--ion-item-background: none;
--ion-border-color: #f6a8b7;
}
</style>
1 post - 1 participant